Salah satu keluhan yang paling sering saya dengar dari tim HR adalah soal survei internal yang partisipasinya selalu telat dan pas-pasan. Survei budaya keselamatan pasien misalnya, sudah dibuka dua minggu tapi yang isi baru sepertiga karyawan. Bukan karena mereka malas, tapi karena mereka memang tidak tahu ada survei baru. Portal HR dibuka kalau ada perlu saja, jadi pengumuman apa pun yang muncul di dalam aplikasi ya cuma diam di situ sampai ada yang kebetulan mampir.

Dari situ saya menambahkan push notification ke HR Portal. Bukan aplikasi baru, bukan install ulang, cukup web app yang sudah mereka pakai sehari-hari tapi sekarang bisa mengirim notifikasi langsung ke perangkat, persis seperti notifikasi WhatsApp atau email masuk.

Kenapa Web Push API, bukan aplikasi native

HR Portal ini web app yang diakses lewat browser di HP karyawan, jadi opsi paling masuk akal ya Web Push API bawaan browser modern, dipasangkan dengan Service Worker. Tidak perlu publish ke Play Store, tidak perlu SDK pihak ketiga seperti Firebase Cloud Messaging yang berarti data subscription harus lewat server Google. Semua proses, dari permintaan izin sampai pengiriman notifikasi, jalan langsung antara browser karyawan dan server HR Portal sendiri.

Konsekuensinya, saya yang harus mengurus sendiri bagian yang biasanya digratiskan oleh FCM, yaitu VAPID key pair untuk autentikasi pengirim, penyimpanan subscription tiap perangkat, dan payload encryption sebelum notifikasi dikirim. Tapi untuk skala HR Portal yang penggunanya karyawan internal satu institusi, ini jauh lebih ringan dibanding menambah dependensi ke layanan luar.

Alur tiga langkah yang dilihat karyawan

Dari sisi karyawan, aktivasinya cuma tiga langkah. Pertama, begitu masuk ke halaman Survei Aktif, muncul kartu ajakan mengaktifkan notifikasi dengan dua tombol, Nanti atau Aktifkan. Ini styling saya sendiri di atas dialog permission browser, supaya konteksnya jelas sebelum popup izin asli dari browser muncul dan meminimalkan kemungkinan karyawan menekan Block karena tidak paham untuk apa.

Kedua, setelah izin browser disetujui, muncul modal Konfirmasi Identitas yang minta NIK. Ini bagian yang menurut saya justru paling penting, karena subscription endpoint dari Push API sendiri cuma berupa URL acak dari server push, tidak otomatis terhubung ke siapa pemiliknya. Dengan meminta NIK di titik ini, saya bisa mengaitkan subscription itu ke data karyawan yang sudah login, jadi notifikasi soal survei atau insiden bisa ditarget per unit kerja, bukan broadcast rata ke semua orang.

Ketiga, begitu konfirmasi selesai, badge notifikasi di header berubah aktif, ditandai garis hijau kecil di bawah logo HR Portal. Dari titik ini, setiap kali ada survei baru dibuka atau ada pengumuman dari tim HR, karyawan dapat notifikasi langsung tanpa harus membuka aplikasi.

Bagian teknis di baliknya

Di sisi client, langkah pertama adalah daftar service worker dan minta subscription ke Push API begitu tombol Aktifkan ditekan.

const registration = await navigator.serviceWorker.register('/sw.js');
const permission = await Notification.requestPermission();

if (permission === 'granted') {
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });

  await fetch('/api/notifications/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ subscription, nik })
  });
}

Subscription itu disimpan di database dengan NIK sebagai kuncinya, jadi begitu ada survei baru terbit, server tinggal query siapa saja yang perlu dikirimi lalu push ke endpoint masing-masing pakai VAPID key. Di sisi service worker, bagian yang menampilkan notifikasi begitu payload sampai kurang lebih seperti ini.

self.addEventListener('push', (event) => {
  const data = event.data.json();

  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon-192.png',
      data: { url: data.url }
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

Yang membuat ini terasa ringan buat saya adalah tidak ada state tambahan yang rumit. Service worker cuma menunggu event push lalu menampilkan notifikasi, dan klik notifikasi langsung membuka halaman survei yang dimaksud. Semua logic penargetan siapa dapat notifikasi apa ada di server, bukan di client.

Hasil yang saya lihat

Efek yang paling terasa bukan cuma soal survei, tapi juga fitur Lapor Insiden yang ada di HR Portal ini. Kalau ada laporan insiden yang perlu ditindaklanjuti unit tertentu, tim terkait bisa langsung tahu tanpa menunggu ada yang cek portal secara manual. Notifikasi yang tadinya cuma ide tambahan buat survei, ternyata jadi jalur komunikasi yang dipakai lebih luas dari perkiraan awal saya.

Yang saya pelajari dari proses ini, fitur sekecil push notification bisa berdampak besar kalau masalah dasarnya memang soal informasi yang tidak sampai ke orang yang tepat, bukan soal fitur aplikasinya yang kurang lengkap. Kadang solusinya bukan menambah menu baru, tapi memastikan yang sudah ada benar-benar terlihat oleh orang yang butuh.