Menggunakan Notifications API

Ernest Delgado

Twitter

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.