Artikel ini merupakan artikel untuk yang sudah mengerti HTML dan JavaScript, Jika Anda belum mengerti HTML dan JavaScript, kami sarankan untuk mengikuti panduan Belajar Pemrograman HTML untuk Pemula dan Pemrograman JavaScript untuk Pemula.

Biasanya untuk membuat notifikasi, Anda dapat menggunakan perintah alert('isi notifikasi') pada JavaScript. Sayangnya, biasanya alert membuat browser menjadi memblokir semua input di yang dimasukkan sampai dialog alert nya tersebut ditutup.

Pada artikel ini, kami akan membahas tentang cara membuat notifikasi yang lebih elegan pada halaman web Anda menggunakan JavaScript. Namun sayangnya, untuk saat ini tidak semua browser mendukung pembuatan notifikasi.

Untuk mengecek apakah browser yang Anda gunakan mendukung notifikasi, Anda dapat menggunakan perintah berikut :

if(window.webkitNotifications){
   // bworser mendukung
}else{
   // bworser tidak mendukung
}

Setelah itu, Anda tidak dapat langsung menampilkan notifikasi, Anda permu meminta izin ke orang yang mengakses halaman web Anda dengan perintah :

window.webkitNotifications.requestPermission();

Dan untuk mengecek apakah user sudah menyetujuinya, Anda dapat menggunakan perintah :

if(window.webkitNotifications.checkPermission() != 0){
   // user sudah menyetujui
}else{
   // user belum menyetujui
}

Selanjutnya, untuk menampilkan notifikasi, Anda dapat menggunakan perintah sebagai berikut :

var notification = window.webkitNotifications.createNotification(image, title, message);

Dimana, image adalah gambar yang akan ditampilkan. title adalah judul dialog notifikasi dan message adalah isi pesan notifikasi. Selanjutnya untuk menampilkannya anda dapat menggunakan metode show().

notification.show();

Contoh lengkapnya adalah sebagai berikut :

Hasilnya ketika Anda mengklik tombol Show Notification adalah sebagai berikut :

Notifikasi

Selamat mencoba