Cara Kerja Internal Notifikasi Web Push
Anda melihat notifikasi untuk pesan baru, pembaruan pesanan, atau pengingat pembayaran.
Terlihat sederhana. Backend Anda mengirim pesan dan pengguna menerimanya.
Kenyataannya, proses ini melibatkan banyak bagian yang bergerak. Backend Anda tidak pernah berbicara langsung dengan browser. Sebaliknya, ia menggunakan Push Service.
Google Chrome menggunakan Firebase Cloud Messaging. Firefox menggunakan Mozilla Push Service.
Alur kerjanya adalah sebagai berikut:
Backend → Push Service → Browser → Service Worker → Pengguna
Berikut adalah cara membangun sistem ini menggunakan React dan Golang.
Komponen-komponennya
- Frontend (React): Meminta izin dan mendaftarkan Service Worker.
- Service Worker: Skrip latar belakang yang berjalan di browser. Ia menangani peristiwa (event) bahkan saat situs web Anda ditutup.
- Backend (Golang): Menyimpan langganan (subscription) dan mengirim pesan terenkripsi.
- Push Service: Perantara yang mengirimkan pesan ke browser.
Alur Langganan (Subscription Flow)
Untuk mengirim pesan, Anda memerlukan langganan.
- Pengguna memberikan izin.
- Browser menghasilkan objek langganan yang berisi endpoint dan kunci keamanan.
- Aplikasi React Anda mengirimkan objek ini ke backend Golang Anda.
- Backend Anda menyimpannya di dalam database.
Anda harus menggunakan kunci VAPID untuk mengidentifikasi server Anda. Gunakan kunci publik untuk frontend dan kunci privat untuk backend. Jangan pernah membagikan kunci privat Anda.
Implementasi
Di React, Anda mendaftarkan Service Worker untuk mendengarkan peristiwa push. Worker ini berjalan di latar belakang. Ia menerima data dan menampilkan notifikasi kepada pengguna.
Di Golang, Anda menggunakan library untuk menangani enkripsi dan autentikasi VAPID. Server Anda membaca langganan dari database, mengenkripsi payload, dan mengirimkannya ke layanan push browser.
Skalabilitas untuk Produksi
Pengaturan sederhana cukup untuk proyek kecil. Sistem besar membutuhkan lebih banyak hal.
- Menangani banyak perangkat: Satu pengguna mungkin memiliki ponsel dan laptop. Simpan beberapa langganan per pengguna.
- Pembersihan data: Langganan memiliki masa kedaluwarsa. Jika Anda mendapatkan error 404 atau 410, hapus langganan tersebut dari database Anda.
- Gunakan Antrean (Queues): Untuk jutaan pengguna, gunakan Kafka atau alat serupa. Ini memungkinkan sistem Anda memproses notifikasi secara asinkron.
- Implementasikan percobaan ulang (retries): Gunakan exponential backoff untuk menangani kegagalan jaringan.
WebSocket bagus untuk chat langsung saat pengguna sedang aktif. Web Push lebih baik untuk menjangkau pengguna saat tab ditutup.