Pengantar
Notifications API memungkinkan Anda menampilkan notifikasi kepada pengguna untuk peristiwa tertentu, baik secara pasif (email baru, tweet, atau acara kalender) maupun pada interaksi pengguna, terlepas dari tab mana yang memiliki fokus. Ada spesifikasi draf, tetapi saat ini tidak ada dalam standar apa pun.
Anda dapat mengikuti langkah-langkah sederhana berikut untuk menerapkan notifikasi dalam beberapa menit:
Langkah 1: Periksa dukungan Notifications API
Kami memeriksa apakah webkitNotifications didukung. Perhatikan bahwa nama webkitNotifications karena merupakan bagian dari spesifikasi draf. Spesifikasi akhir akan memiliki fungsi notifications().
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
Langkah 2: Izinkan pengguna memberikan izin ke situs untuk menampilkan notifikasi
Setiap konstruktor yang kami sebutkan akan menampilkan error keamanan jika pengguna belum memberikan izin secara manual ke situs untuk menampilkan notifikasi.
Untuk menangani pengecualian, Anda dapat menggunakan pernyataan try-catch, tetapi Anda juga dapat menggunakan metode checkPermission untuk tujuan yang sama.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Jika aplikasi web tidak memiliki izin untuk menampilkan notifikasi, metode requestPermission akan menampilkan infobar:
Namun, sangat penting untuk diingat bahwa metode requestPermission hanya berfungsi di pengendali peristiwa yang dipicu oleh tindakan
pengguna, seperti peristiwa mouse atau keyboard, untuk menghindari infobar yang tidak diminta. Dalam hal ini, tindakan pengguna adalah klik pada tombol dengan ID "show_button".
Cuplikan di atas tidak akan pernah berfungsi jika pengguna belum secara eksplisit mengklik tombol atau link yang memicu requestPermission pada suatu waktu.
Langkah 3: Lampirkan pemroses dan tindakan lainnya
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Pada tahap ini, Anda mungkin ingin mengenkapsulasi semua peristiwa dan tindakan ini dengan membuat class Notifikasi Anda sendiri agar kode tetap lebih bersih, meskipun hal ini di luar cakupan tutorial ini.