Notifikasi push kini didukung lintas browser

Kirim notifikasi yang tepat waktu dan berguna kepada pengguna.

Notifikasi push distandarisasi pada tahun 2016 dengan rilis Push API dan Notification API, yang merupakan bagian dari Web Applications Working Group W3C. API ini menyediakan fungsi yang diperlukan bagi developer web untuk menyertakan notifikasi push ke dalam aplikasi web mereka dan bagi pengguna untuk menerima serta berinteraksi dengan notifikasi di browser web mereka. Pesan push adalah notifikasi yang dikirim ke browser web pengguna dari situs atau aplikasi yang sebelumnya telah diberi izin oleh pengguna untuk mengirim notifikasi. Pesan ini dapat digunakan untuk memberi tahu pengguna tentang konten atau info terbaru, mengingatkan mereka tentang acara atau batas waktu mendatang, atau memberikan informasi penting lainnya. Pesan push dapat sangat berguna untuk aplikasi yang perlu menyampaikan informasi yang relevan dan tepat waktu kepada penggunanya, seperti aplikasi berita atau olahraga, atau untuk situs e-commerce yang ingin mengirim notifikasi kepada pengguna tentang penawaran atau diskon spesial.

Untuk mendaftar ke notifikasi push, periksa terlebih dahulu apakah browser Anda mendukungnya dengan memeriksa objek serviceWorker dan PushManager di objek navigator dan window.

Jika notifikasi push didukung, gunakan kata kunci async dan await untuk mendaftarkan pekerja layanan dan berlangganan notifikasi push. Berikut adalah contoh cara melakukannya menggunakan JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
 
try {
   
// Register the service worker.
   
const swReg = await navigator.serviceWorker.register("/sw.js");

   
// Subscribe for push notifications.
   
const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly
: true
   
});

   
// Save the push subscription to the database.
    savePushSubscription
(pushSubscription);
 
} catch (error) {
   
// Handle errors.
    console
.error("Error subscribing for push notifications.", error);
 
}
} else {
 
// Push notifications are not supported by the browser.
  console
.error("Push notifications are not supported by the browser.");
}

Dukungan Browser

  • Chrome: 42.
  • Edge: 17.
  • Firefox: 44.
  • Safari: 16.

Sumber

Bacaan lebih lanjut