WEB NOTIFICATION API

Web Notification API adalah teknologi yang memungkinkan aplikasi web untuk menerima dan memanfaatkan notifikasi push dari server. Artikel ini akan menunjukkan bagaimana menggunakan Web Notification API dalam JavaScript.

Persyaratan Dasar

Untuk menggunakan Web Notification API, peramban pengguna harus mendukung API tersebut. Kamu bisa menggunakan fitur deteksi ini untuk memeriksa dukungan.

if (!("Notification" in window)) {
  alert("Peramban ini tidak mendukung notifikasi web.");
}

Meminta Izin

Sebelum pengguna dapat menerima notifikasi, aplikasi harus meminta izin pengguna. Berikut adalah cara meminta izin menggunakan JavaScript.

Notification.requestPermission().then(function (permission) {
  if (permission === 'granted') {
    console.log('Izin notifikasi diberikan.');
  } else {
    console.log('Izin notifikasi ditolak.');
  }
});

Membuat Notifikasi

Setelah mendapatkan izin, kamu dapat membuat dan menampilkan notifikasi baru menggunakan konstruktor Notification.

var notification = new Notification('Judul Notifikasi', {
  body: 'Ini adalah isi notifikasi.',
  icon: 'icon.png'
});

Opsional: Menambahkan Interaksi

Kamu bisa menambahkan beberapa jenis interaksi kepada notifikasi, seperti klik. Berikut adalah contoh membuat notifikasi yang mengarahkan pengguna ke URL tertentu saat diklik.

var notification = new Notification('Judul Notifikasi', {
  body: 'Klik untuk membuka URL.',
  icon: 'icon.png'
});

notification.onclick = function () {
  window.open('https://www.example.com');
};

Opsional: Menampilkan Notifikasi dengan Timer

Jika kamu ingin menampilkan notifikasi setelah jangka waktu tertentu, kamu bisa menggunakan metode setTimeout.

setTimeout(function () {
  var notification = new Notification('Judul Notifikasi', {
    body: 'Ini adalah isi notifikasi.',
    icon: 'icon.png'
  });
}, 5000);

Web Notification API adalah alat yang efektif untuk mengarahkan perhatian pengguna dan memberikan informasi penting. Selamat mencoba!