Web Push API dan VAPID: Membangun Notifikasi Browser yang Aman dan Relevan

Notifikasi browser dapat membantu pengguna mengetahui pesan baru, status pesanan, atau pembaruan penting tanpa harus terus membuka sebuah situs. Untuk membangunnya, pengembang dapat memanfaatkan Web Push API bersama service worker dan protokol Web Push. Salah satu komponen penting di sisi server adalah VAPID, mekanisme yang membantu layanan push mengenali aplikasi pengirim. Implementasinya perlu dirancang dengan memperhatikan izin pengguna, keamanan langganan, dan frekuensi pesan agar notifikasi terasa berguna, bukan mengganggu.

Apa itu Web Push API dan VAPID?

Web Push API memungkinkan aplikasi web menerima pesan dari server meskipun halaman situs tidak sedang terbuka di tab aktif. Pesan diteruskan melalui layanan push yang digunakan browser, lalu browser membangunkan service worker untuk memprosesnya. Jika sesuai kebutuhan, service worker dapat menampilkan notifikasi melalui showNotification(). Pola ini berbeda dari polling, yaitu halaman berulang kali meminta pembaruan ke server, yang dapat membuang bandwidth dan sumber daya.

VAPID adalah singkatan dari Voluntary Application Server Identification. Mekanisme ini menggunakan pasangan kunci publik dan privat untuk mengidentifikasi server aplikasi saat mengirim pesan ke layanan push. Kunci publik dipakai ketika browser membuat langganan, sedangkan kunci privat disimpan secara rahasia di server untuk menandatangani permintaan pengiriman. VAPID bukan pengganti enkripsi payload Web Push; keduanya memiliki fungsi berbeda dalam arsitektur pengiriman.

Alur pengiriman notifikasi

Alurnya terdiri dari beberapa tahap. Pertama, situs meminta izin notifikasi setelah pengguna memahami manfaatnya dan melakukan tindakan yang jelas, misalnya menekan tombol “Aktifkan notifikasi”. Kedua, browser memastikan service worker aktif, lalu membuat langganan menggunakan kunci publik VAPID. Hasilnya berupa objek PushSubscription yang berisi endpoint layanan push dan material kunci untuk mengirim payload.

Ketiga, situs mengirim data langganan ke backend dan menyimpannya bersama identitas akun atau preferensi yang relevan. Keempat, ketika ada peristiwa yang memang layak diberitahukan, backend mengirim pesan ke endpoint tersebut dengan pustaka Web Push yang sesuai. Layanan push meneruskan pesan ke browser; service worker kemudian memutuskan apakah perlu menampilkan notifikasi. Karena endpoint langganan dapat digunakan untuk mengirim pesan, perlakukan data ini sebagai informasi sensitif dan jangan memaparkannya ke publik.

Prasyarat sebelum mulai

• Gunakan HTTPS pada situs produksi. Service worker dan fitur push membutuhkan secure context, dengan pengecualian lingkungan pengembangan tertentu seperti localhost.
• Sediakan service worker yang berada pada cakupan URL yang benar dan tangani peristiwa push serta notificationclick.
• Bangkitkan pasangan kunci VAPID melalui pustaka tepercaya. Simpan kunci privat di server atau secret manager; jangan pernah memasukkannya ke JavaScript yang dikirim ke browser.
• Siapkan endpoint backend untuk menyimpan, memperbarui, dan menghapus langganan. Validasi sesi atau token pengguna agar endpoint tidak menjadi sasaran penyalahgunaan.

Contoh membuat langganan dari browser

Setelah service worker terdaftar dan kunci publik VAPID tersedia, kode berikut menggambarkan langkah inti. Fungsi konversi mengubah kunci publik berformat base64url menjadi byte yang dibutuhkan browser. Nilai contoh harus diganti dengan kunci publik milik aplikasi, dan langganan yang dihasilkan tetap perlu dikirim ke backend melalui permintaan yang diautentikasi.

const registration = await navigator.serviceWorker.ready;

if (!('PushManager' in window)) {
  throw new Error('Push API tidak didukung browser ini');
}

const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: vapidPublicKeyBytes
});

// Kirim subscription ke backend secara aman.
await fetch('/api/push-subscriptions', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'same-origin',
  body: JSON.stringify(subscription)
});

Contoh tersebut sengaja tidak meminta izin secara otomatis. Tampilkan penjelasan terlebih dahulu dan panggil alur berlangganan sebagai respons atas tindakan pengguna. Backend juga harus memeriksa autentikasi, membatasi permintaan berulang, dan tidak menganggap data dari browser tepercaya begitu saja.

Menampilkan dan menangani notifikasi

Di service worker, peristiwa push dapat diproses dengan event.waitUntil() agar browser menunggu pekerjaan asinkron selesai. Panggil self.registration.showNotification() dengan judul, isi singkat, ikon yang sesuai, dan data navigasi seperlunya. Saat pengguna menekan notifikasi, tangani notificationclick, tutup notifikasi, lalu fokuskan tab yang sudah terbuka atau buka halaman tujuan yang telah divalidasi. Hindari menerima URL tujuan sembarangan dari payload karena bisa dimanfaatkan untuk mengarahkan pengguna ke situs berbahaya.

Keamanan, privasi, dan pengelolaan langganan

Jangan masukkan kata sandi, token sesi, kode pemulihan, atau informasi pribadi yang sensitif ke isi notifikasi. Pesan dapat muncul di layar terkunci dan dilihat orang lain. Gunakan payload seminimal mungkin, lalu arahkan pengguna ke halaman yang memerlukan autentikasi untuk melihat rincian. Simpan kunci privat VAPID sebagai secret, batasi aksesnya, dan siapkan prosedur rotasi yang mempertimbangkan langganan yang sudah ada.

Langganan dapat kedaluwarsa atau tidak lagi valid. Jika layanan push mengembalikan status seperti 404 atau 410, backend biasanya perlu menandai langganan tersebut untuk dihapus setelah memeriksa respons pustaka yang digunakan. Sediakan pilihan untuk berhenti berlangganan dan hormati preferensi kategori, jam tenang, serta batas frekuensi. Jangan mengirim pesan promosi hanya karena secara teknis pesan bisa dikirim.

Cara menguji implementasi

Uji alur izin ketika pengguna menerima maupun menolak permintaan, pengiriman saat tab tidak aktif, klik notifikasi, langganan yang sudah dicabut, dan kondisi jaringan terputus. Periksa juga perilaku pada browser dan sistem operasi yang menjadi target karena kebijakan push serta tampilan notifikasi dapat berbeda. Catat hasil pengiriman, tetapi jangan menyimpan payload sensitif dalam log. Pantau rasio izin, klik, kegagalan, dan berhenti berlangganan untuk mengetahui apakah notifikasi benar-benar bermanfaat.

Kesimpulan

Web Push API cocok untuk pembaruan yang perlu diketahui tepat waktu, sedangkan VAPID membantu mengidentifikasi server aplikasi ke layanan push. Implementasi yang baik membutuhkan HTTPS, service worker, penyimpanan langganan yang aman, penanganan kegagalan, dan persetujuan yang jelas. Prioritaskan pesan yang relevan, ringkas, dan mudah dihentikan. Dengan begitu, notifikasi menjadi fitur yang mendukung pengalaman pengguna, bukan sumber gangguan atau risiko privasi.

Referensi: MDN: Push API, MDN: showNotification(), dan IETF RFC 8292: VAPID.