Pengantar
Notifications API memungkinkan Anda menampilkan notifikasi kepada pengguna untuk peristiwa tertentu, baik secara pasif (email, tweet, atau acara kalender baru) maupun saat 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 hanya dalam beberapa menit:
Langkah 1: Periksa dukungan Notifications API
Kami memeriksa apakah webkitNotifications didukung. Perhatikan bahwa nama webkitNotifications adalah karena merupakan bagian dari draf spesifikasi. 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 kepada situs untuk menampilkan notifikasi
Konstruktor yang kami sebutkan akan memunculkan error keamanan jika pengguna belum memberikan izin secara manual kepada 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 handler peristiwa yang dipicu oleh tindakan pengguna, seperti peristiwa mouse atau keyboard, untuk menghindari info bar yang tidak diminta. Dalam hal ini, tindakan pengguna adalah mengklik 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 saat.
Langkah 3: Lampirkan pendengar 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 titik ini, Anda mungkin ingin mengenkapsulasi semua peristiwa dan tindakan ini dengan membuat class Notifikasi Anda sendiri agar kode tetap bersih, meskipun hal ini di luar cakupan tutorial ini.