Notifications API dan Penanganan Izin

Notification.permission adalah teks statis yang mencerminkan status izin saat ini. Nilainya dapat berupa "granted" (pengguna mengizinkan), "denied" (pengguna memblokir), atau "default" (belum pernah diminta). Periksa properti ini sebelum mencoba menampilkan notifikasi agar terhindar dari kesalahan yang tidak perlu.

Notification.requestPermission() mengembalikan Promise yang selesai dengan teks izin baru. Panggil fungsi ini hanya sebagai tanggapan atas tindakan pengguna yang jelas, bukan saat halaman dimuat. Peramban mengabaikan atau menekan permintaan izin yang langsung muncul saat pemuatan, dan pengguna merasa terganggu ketika permintaan tersebut muncul tanpa konteks.

Pola yang paling efektif adalah menampilkan permintaan dalam aplikasi yang menjelaskan manfaatnya, lalu membiarkan pengguna mengeklik "Aktifkan notifikasi" sebelum memanggil requestPermission(). Cara ini memberikan konteks, meningkatkan tingkat persetujuan, dan mencegah peramban menandai situs Anda sebagai pengganggu. Jangan pernah meminta izin saat halaman dimuat.

new Notification(title, options) membuat dan menampilkan notifikasi sistem. Argumen pertama adalah teks judul. Objek options merupakan argumen kedua dan menerima properti seperti body (teks subjudul), icon (URL gambar), dan tag untuk mencegah duplikasi. Fitur ini hanya berfungsi jika izinnya adalah "granted".

Opsi notifikasi utama meliputi: body untuk teks penjelas di bawah judul, icon untuk gambar kecil, badge untuk ikon monokrom kecil yang ditampilkan di area notifikasi OS, image untuk gambar besar di dalam notifikasi, tag untuk mengganti notifikasi sebelumnya dengan tag yang sama, dan requireInteraction: true untuk mempertahankan notifikasi sampai pengguna bertindak.

Instans Notification memicu beberapa peristiwa: onclick dipicu ketika pengguna mengeklik notifikasi (gunakan untuk memfokuskan jendela dan melakukan navigasi), onclose dipicu ketika notifikasi ditutup, dan onerror dipicu jika terjadi masalah saat membuatnya. Pasang penangan pada instans yang dikembalikan setelah memanggil new Notification().

Simpan instans Notification yang dikembalikan dalam sebuah variabel, lalu panggil notification.close() untuk menutupnya secara terprogram. Cara ini berguna untuk notifikasi yang sensitif terhadap waktu dan menjadi tidak relevan setelah beberapa saat. Gabungkan dengan setTimeout untuk menutupnya secara otomatis setelah beberapa detik.

API Notifikasi memerlukan konteks aman. Pada halaman HTTP, typeof Notification === 'undefined' dapat bernilai demikian, atau API dapat dinonaktifkan sepenuhnya, bergantung pada perambannya. Ini merupakan langkah keamanan untuk mencegah situs berbahaya membanjiri pengguna dengan pesan sistem palsu. Selalu periksa ketersediaannya sebelum menggunakan API ini.

Hook useNotifications dapat menyediakan dua metode: requestPermission() dan showNotification(title, options). Hook ini secara internal melacak status izin saat ini dan memperbaruinya setelah permintaan dibuat. Komponen dapat memanggil showNotification tanpa mengkhawatirkan pemeriksaan izin karena hook menanganinya secara internal.

API Visibilitas Halaman menyediakan document.hidden dan peristiwa visibilitychange. Notifikasi paling berguna ketika pengguna tidak sedang melihat tab tersebut. Periksa document.hidden === true sebelum menampilkan notifikasi agar tidak memberikan pemberitahuan berulang ketika halaman sudah berada di latar depan.

API Notifikasi yang ditampilkan di sini digunakan untuk notifikasi yang dipicu secara lokal dari halaman itu sendiri. Untuk notifikasi push yang tiba meskipun halaman ditutup, Anda memerlukan Push API yang digabungkan dengan pekerja layanan. Pekerja layanan menerima peristiwa push dan memanggil self.registration.showNotification() dari latar belakang.

Manakah dari pilihan berikut yang BUKAN nilai valid untuk Notification.permission?

Notification.permission dapat bernilai granted, denied, atau default. Selalu minta izin setelah tindakan pengguna, bukan saat halaman dimuat. Gunakan new Notification(title, options) untuk membuat notifikasi dan tangani onclick untuk memfokuskan jendela. Gabungkan dengan API Visibilitas agar notifikasi hanya ditampilkan ketika tab disembunyikan.