Cara Kerja Web Push Notification di Browser Menggunakan Service Workers

Hantu di Belakang Layar Browser (Service Workers)

Sebelumnya kita membahas Push Notif untuk HP (Aplikasi Android/iOS) menggunakan FCM. Namun di era modern, Website murni (Google Chrome di PC atau HP) juga memiliki kemampuan ajaib yang sama untuk memunculkan kotak notifikasi meskipun kamu tidak sedang membuka website tersebut.

Sihir ini bisa terjadi berkat keberadaan Service Workers.

Apa Itu Service Worker?

Service Worker adalah file JavaScript khusus (misal: sw.js) yang kamu perintahkan kepada Browser untuk di-download secara diam-diam. Beda dengan JavaScript biasa yang mati saat tab Browser di-*close* (ditutup), Service Worker ditanam langsung di jantung mesin Google Chrome dan akan terus hidup (berjalan di latar belakang / Background) meskipun semua tab website-mu sudah ditutup bersih!

Arsitektur 3 Langkah (Web Push API)

1. Meminta Izin & Subscription: Saat kamu membuka web, muncul peringatan: "Website ini ingin mengirim Notifikasi (Allow/Block)". Jika di-Allow, Service Worker akan menghubungi Server Inti Chrome, dan memintakan sebuah "KTP Unik" (Endpoint URL & Keys) milik Laptop tersebut. KTP ini dikirim dan disimpan ke *Server Backend*-mu.
2. Backend Menembak Server Push: Jika ada pesan baru, *Backend Node.js*-mu mengambil KTP tadi, lalu membungkus pesannya dengan enkripsi tingkat tinggi (Menggunakan VAPID Keys untuk membuktikan bahwa itu benar *server*-mu). Pesan ditembakkan ke *Server Push* milik Google/Mozilla/Apple.
3. Sistem Operasi Membangunkan Pekerja: *Server Push Google* akan menelepon Google Chrome di laptop pengunjung secara gaib. Chrome lalu membangunkan Service Worker (sw.js) yang sedang tertidur tadi. Service Worker membaca pesannya, lalu mengeksekusi perintah self.registration.showNotification() yang memunculkan kotak peringatan cantik di pojok kanan bawah layarmu lengkap dengan suaranya!

Tantangan Terbesar

Sebagai *developer*, teknologi Web Push adalah pilar utama untuk membuat PWA (Progressive Web Apps) (Website yang terasa seperti Aplikasi Asli). Tantangannya hanyalah dari sisi UX: Jangan mengirim notifikasi "Spam Promosi" setiap jam, karena pengunjung hanya butuh 3 klik di pengaturan Chrome untuk mematikan dan mencabut akses *Service Worker*-mu selamanya!