menengahbrowser-apinotifikasiMenengah3 mnt baca

Notification API: Mengirim Notifikasi Browser

Pengguna tidak selalu menatap tab webmu. Pelajari cara meminta izin dan mengirim notifikasi sistem, plus cara elegan menangani penolakan.

Kenapa Ada Notification API?

Bayangkan aplikasi pengingat jadwal piket kelas: percuma kalau pengingatnya hanya muncul di dalam halaman, karena murid harus membuka tab itu terus-menerus. Notification API menyelesaikan masalah ini dengan menampilkan notifikasi sistem operasi: popup kecil yang muncul bahkan saat browser diminimalkan, persis seperti notifikasi chat di HP.

API ini dipakai aplikasi to-do, kalender, dan dashboard kasir untuk memberi tahu hal penting tanpa memaksa pengguna menatap layar. Syaratnya satu: pengguna harus memberi izin dulu.

Meminta Izin: requestPermission

Sebelum mengirim notifikasi apa pun, panggil Notification.requestPermission(). Ia mengembalikan Promise berisi salah satu dari tiga string:

"granted": pengguna mengizinkan, silakan kirim notifikasi.
"denied": pengguna menolak. Kamu tidak bisa meminta lagi secara programatik; pengguna harus mengubahnya manual di pengaturan browser.
"default": pengguna menutup dialog tanpa memilih (dianggap belum memutuskan).

javascript

async function mintaIzin() {
  const hasil = await Notification.requestPermission();
  if (hasil === "granted") {
    console.log("Izin diberikan, notifikasi siap dikirim.");
  } else if (hasil === "denied") {
    console.log("Izin ditolak. Tampilkan pengingat di dalam halaman saja.");
  } else {
    console.log("Pengguna belum memutuskan.");
  }
}

Pola penting: jangan langsung meminta izin saat halaman dimuat. Pengguna yang belum paham konteksnya hampir pasti menekan "Block". Minta izin sebagai respons atas aksi, misalnya saat mereka menekan tombol "Aktifkan pengingat".

Mengirim Notifikasi: new Notification

Setelah izin diberikan, membuat notifikasi semudah membuat object:

javascript

document.getElementById("ingatkan").addEventListener("click", async () => {
  const izin = await Notification.requestPermission();
  if (izin !== "granted") return;

  new Notification("Waktunya Piket!", {
    body: "Ani, hari ini giliranmu piket kelas. Jangan lupa bawa sapu!",
    icon: "https://example.com/sapu.png",
  });
});

Konstruktor menerima judul dan object opsi. Opsi yang paling berguna: body (teks isi), icon (gambar kecil), dan tag (ID unik supaya notifikasi baru menggantikan yang lama, bukan menumpuk).

Contoh Realistis: Timer Masak Warung

Di warung, mie yang direbus kelamaan jadi lembek. Timer berbasis notifikasi menyelamatkan juru masak yang tangannya sibuk:

javascript

function mulaiTimerMasak(menit, namaPesanan) {
  setTimeout(() => {
    if (Notification.permission === "granted") {
      new Notification("Pesanan Matang!", {
        body: namaPesanan + " sudah " + menit + " menit. Angkat sekarang!",
        tag: "timer-masak",
      });
    } else {
      document.getElementById("peringatan").textContent =
        namaPesanan + " sudah matang! (aktifkan izin notifikasi untuk popup)";
    }
  }, menit * 60 * 1000);
}

// Dipanggil setelah pengguna menekan tombol "Mulai Masak"
mintaIzinLalu(() => mulaiTimerMasak(3, "Mie goreng Budi"));

Perhatikan pola fallback di else: kalau izin tidak ada, pesan tetap ditampilkan di dalam halaman. Pengguna yang menolak izin tidak boleh kehilangan informasi penting.

Menangani Penolakan dengan Elegan

Penolakan izin adalah skenario normal, bukan error. Aturannya:

Jangan meminta ulang otomatis. Browser memblokir requestPermission berulang setelah penolakan, dan pengguna makin kesal.
Sediakan alternatif dalam halaman. Banner, badge angka, atau bunyi bisa menggantikan notifikasi sistem.
Jelaskan nilainya dulu. Tampilkan teks seperti "Aktifkan pengingat agar tidak lupa jadwal piket" sebelum tombol meminta izin, supaya pengguna paham untuk apa izin itu.

Catatan teknis: cek dukungan dengan if ("Notification" in window). Di sebagian konteks, notifikasi juga butuh secure context (HTTPS), sama seperti Clipboard API.

Jebakan Umum

Meminta izin saat halaman dimuat: hampir pasti ditolak. Minta sebagai respons aksi pengguna.
Tidak mengecek Notification.permission: mengirim new Notification tanpa izin yang granted akan gagal diam-diam atau melempar error.
Spam notifikasi tanpa tag: notifikasi menumpuk dan mengganggu. Pakai tag unik per jenis pesan agar yang baru menggantikan yang lama.
Lupa fallback: pengguna yang menolak izin tetap butuh informasinya. Selalu sediakan tampilan dalam halaman.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Notifikasi Tugas Selesai

Di dunia nyata, notifikasi dipakai aplikasi to-do dan kasir untuk memberi tahu hal penting saat pengguna tidak melihat layar, misalnya timer masakan matang. Kuasai alur izin ini dan kamu bisa membangun pengingat yang sopan. Tugasmu: saat tombol diklik, minta izin notifikasi; jika granted, kirim notifikasi berjudul "Tugas Selesai" dengan body "PR Matematika sudah dikumpulkan!"; jika ditolak, tampilkan pesan itu sebagai teks di #app.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Open Sandbox