Pengantar
Notifications API memungkinkan Anda menampilkan notifikasi kepada pengguna untuk acara tertentu, baik secara pasif (email, tweet, atau acara kalender baru) dan 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 ini untuk menerapkan notifikasi hanya 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 notifikasi().
// 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
Salah satu 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 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 dalam 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 tidak secara eksplisit mengklik tombol atau link yang memicu requestPermission
pada suatu saat.
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 yang membuat class Notifikasi Anda sendiri untuk menjaga kode tetap lebih bersih, meskipun ini di luar cakupan tutorial ini.