Browser Push Notification — Dari Nol Sampai Ngangkring di Semua Browser

Pernah merasa kesal setiap kali harus ngecek manual apakah artikel barumu sudah terbit? Atau pengin ngasih tahu subscriber bahwa ada konten baru tanpa mereka harus buka website dulu? Nah, itu masalah yang pengin aku selesaikan dengan plugin ini.

Browser push notification adalah teknologi yang memungkinkan website ngirim notifikasi langsung ke browser pengguna — mirip kayak notifikasi dari aplikasi HP, tapi cukup lewat browser. Di desktop, notifikasi muncul di pojok kanan bawah. Di iOS, muncul kayak notifikasi aplikasi biasa. Dan yang keren: pengguna gak perlu buka websitenya dulu.

Konsep Dasar Web Push

Sebelum bahas pluginnya, aku mau cerita sedikit gimana Web Push API bekerja. Ada tiga aktor di sini:

1. Application Server — server kita (PHP, Node.js, dll) yang ngirim notifikasi
2. Push Service — infrastruktur dari Google (FCM), Apple (APNs), Microsoft (WNS), atau Mozilla yang jadi perantara
3. Browser/Device — tempat notifikasi muncul

Alurnya gini: server kita encrypt payload notifikasi, kirim ke Push Service, Push Service teruskan ke browser, browser decrypt pake kunci yang disimpan pas subscribe, lalu tampilkan notifikasi lewat Service Worker.

Yang bikin susah: enkripsi ini harus sesuai standar RFC 8291 — pake ECDH key agreement, HKDF key derivation, dan AES-128-GCM. Kalau encryptnya salah satu byte aja, browser gak bisa decrypt dan notifikasi gak muncul. Aku alami sendiri ini pas develop plugin.

Kenapa PHP Native Saja Tidak Cukup?

Di percobaan pertama, aku implementasi enkripsi pake PHP murni — openssl_pkey_derive(), hash_hmac() buat HKDF, openssl_encrypt() buat AES-GCM. Semua test lokal lolos: encrypt → decrypt cocok. Tapi pas dikirim ke browser asli, notifikasi gak muncul. Nol besar. Gagal total.

Masalahnya? Aku lupa ngasih AAD (Additional Authenticated Data) ke fungsi AES-GCM. AAD itu header dari payload encrypted itu sendiri — salt, record size, dan key identifier. Tanpa AAD yang sesuai, browser gak bisa nge-validasi authentication tag, jadinya event.data di Service Worker nilainya null, dan notifikasi batal tampil.

Arsitektur Plugin Browser Push

Plugin ini gak cuma enkripsi doang. Ada beberapa komponen yang saling terkait:

1. Service Worker

File sw.js yang di-deploy di root website. Tugasnya: nangkap event push dari browser, parse payload JSON, terus tampilin notifikasi pake API showNotification(). Juga nanganin event klik notifikasi — misal buka artikel yang dimaksud.

2. Sidebar Widget

Tombol Subscribe/Unsubscribe yang muncul di sidebar blog. Pas diklik, dia minta izin notifikasi ke pengguna, trus subscribe ke Push Service lewat pushManager.subscribe(). Kunci publik (VAPID key) di-embed langsung di widget Javascript biar gak perlu fetch tambahan.

3. Admin Dashboard

Di dashboard CMS, ada halaman Push Notification yang nampilin statistik: jumlah subscriber aktif, riwayat notifikasi, dan tombol Send Test buat kirim notifikasi manual. Juga ada halaman Settings buat konfigurasi VAPID keys.

4. Dual Path Encryption

Fitur yang paling aku banggakan: plugin otomatis detek apakah Node.js tersedia atau tidak. Kalau ada, pake library web-push (yang sudah teruji). Kalau gak ada (misal shared hosting kayak Hostinger), otomatis fallback ke PHP curl + enkripsi custom. Dua-duanya menghasilkan encrypted payload yang valid — diuji ke semua 5 push service (Apple APNs, Google FCM, Microsoft WNS, Mozilla Autopush, dan Samsung).

Perjalanan Debugging yang Melelahkan

Ini bagian yang paling aku inget. Pas pertama kali tes, aku kirim notifikasi ke HP iPhoneku — server balik "sent: 5, failed: 0". Tapi notifikasi gak muncul. Kupikir masalah di browser atau OS. Ternyata…

• Pertama: VAPID key kurang prefix 0x04 (uncompressed EC point). Fix: generate ulang kunci.
• Kedua: openssl_pkey_get_private() butuh format PEM, bukan raw d value. Fix: simpan private key sebagai PEM di database.
• Ketiga: AAD kosong. Fix: tambah AAD sesuai RFC 8188.
• Keempat: Apple APNs butuh header Content-Encoding: aes128gcm. Fix: tambah header.
• Kelima: library web-push v3.6.7 punya regresi koneksi ke Apple APNs (ETIMEDOUT). Fix: pin ke v3.4.5 + set --dns-result-order=ipv4first.

Bayangin, lima bug berbeda yang bikin notifikasi gak muncul. Dan masing-masing butuh waktu berjam-jam buat debug. Tapi pas akhirnya lihat notifikasi "Node.js Test" muncul di iPhone, rasanya… puas banget.

Instalasi dan Konfigurasi

Plugin ini tersedia di Jyavani Plugin Store dan GitHub. Cara installnya:

# 1. Download atau clone dari GitHub
git clone https://github.com/adammuizweb/browser-push.git
cp -r browser-push /var/www/anda/plugins/browser-push

# 2. Install Node.js dependencies (opsional, untuk encryption path yang lebih reliable)
cd plugins/browser-push && npm install

# 3. Generate VAPID keys
php plugins/browser-push/generate-vapid.php

# 4. Tambahkan VAPID keys ke database
#    push_vapid_public_key, push_vapid_private_key, push_vapid_subject

# 5. Aktifkan plugin dari Admin → Plugin Manager

Kalau gak punya Node.js di server, gak masalah. Plugin tetap jalan pake PHP fallback — semua fitur sama, hanya encryption path-nya beda.

Kesimpulan

Membangun plugin browser push notification ini jadi salah satu pengalaman coding paling intens yang pernah aku alami. Bukan karena rumit secara logika, tapi karena standar Web Push encryption sangat ketat — satu byte salah, semua browser menolak.

Sekarang plugin ini sudah teruji di lima push service berbeda, support dual path (Node.js + PHP), dan yang paling penting: beneran work. Kamu bisa lihat sendiri cara kerjanya dengan subscribe lewat widget di sidebar artikel ini — klik Subscribe, izinin notifikasi, dan kamu bakal dapet notifikasi tiap kali ada artikel baru.

Source code plugin ini open source di GitHub, silakan di-fork, di-custom, atau dilaporkan issue-nya. Kalau ada pertanyaan, tulis di komentar ya.