Catatan Programmer

Troubleshoot FCM Web Push yang Tidak Muncul di Browser

Beberapa waktu lalu, saya mengalami kejadian yang cukup menyebalkan: FCM Web Push yang tiba-tiba hilang entah kemana, tidak muncul di browser, tidak nongol di console, bahkan tidak pamit. Saya sudah refresh, hard refresh, clear cache, pencet F12 sampai keyboard panas—tetap saja notifikasinya tidak muncul.

Nah, daripada pengalaman pahit ini hilang jadi angin lalu, lebih baik saya tulis detailnya di sini. Siapa tahu kamu juga lagi menghadapi hal yang sama. Minimal, biar ada teman senasib… walaupun secara virtual.

Di artikel ini, saya akan cerita bagaimana saya memecahkan masalah FCM Web Push yang ngeyel tidak mau muncul, lengkap dengan penyebab paling sering, logika debugging, dan solusi yang akhirnya berhasil.

 

Awal Mula Masalah: "Kok Gak Muncul?"

Suatu hari saya sedang mengerjakan fitur notifikasi di aplikasi web. Tujuannya simpel: kirim notifikasi ke browser user via Firebase Cloud Messaging. Secara teori gampang, ya kan?

Ya KAN??

Nyatanya, teori dan praktek itu jaraknya bisa kayak bumi ke Pluto.

Awalnya saya pede:

  1. Firebase project sudah benar

  2. Service worker sudah saya pasang

  3. VAPID key sudah ada

  4. Permission sudah saya minta

  5. Token sudah berhasil saya dapat

Saya pun kirim push test dari Firebase Console.

Klik…
Menunggu…
Tidak ada apa-apa.

Bahkan angin saja tidak bergerak. Browser saya tetap adem ayem.

Mulai curiga.

Saya cek console:

  • Tidak ada error.

  • Tidak ada warning.

  • Tidak ada hint sedikit pun.

Chrome DevTools seolah berkata:

“Notifikasi? Notifikasi apa? Saya tidak melihat apa-apa di sini.”

 

Langkah 1 - Cek Permission (Masalah Paling Klasik)

Saya buka Chrome → Settings → Notifications.

Lho?
Website saya ternyata masuk ke daftar blocked.

Padahal saya yakin tadi saya klik “Allow”. Tapi mungkin Chrome lagi bad mood, jadi dipindahinnya ke “Block”.

Solusinya:

  • Hapus situs dari daftar

  • Reload browser

  • Minta permission lagi

Saya coba kirim push lagi…

Masih tidak muncul.

Oke… berarti masalahnya bukan hanya itu.

 

Langkah 2 - Cek Service Worker (Jantungnya FCM Web Push)

Kalau push tidak muncul, 90% masalah ada di service worker.

Saya buka chrome://serviceworker-internals (atau via DevTools > Application > Service Workers).

Ternyata service worker saya install, tapi statusnya redundant.

Nah, ini masalah besar.

Biasanya redundant terjadi karena:

  1. File sw berubah tapi tidak di-update

  2. Registrasi ganda

  3. Path service worker salah

  4. Tidak serve dari root domain

Saya cek folder… dan benar saja:
Saya meng-register service worker di:

/js/firebase-messaging-sw.js

Padahal best practice:
service worker harus di root, contohnya:

/firebase-messaging-sw.js

Karena service worker hanya bisa kontrol folder di bawah lokasinya.

Jadi kalau daftarnya dari folder /js/, ya dia cuma tanggung jawab area /js/. Dia tidak bisa handle firebase-messaging-sw.js yang di-root.

Solusinya:

  • Pindahkan file SW ke root

  • Update script registrasi

Setelah diperbaiki, status SW jadi aktif.

Saya coba kirim push lagi…

MASIH tidak muncul.

Mulai sakit kepala. Tapi tidak menyerah.

 

Langkah 3 - Cek Versi Firebase SDK (Masalah yang Jadi Plot Twist)

Karena saya pernah kerja dengan beberapa versi Firebase (v8, v9 modular, v9 compat), saya curiga mungkin import saya tidak cocok.

Kode saya sebelumnya:

import firebase from "firebase/app";
import "firebase/messaging";

Saya pakai Webpack.

Ternyata, untuk web push, Firebase lebih nyaman pakai SDK modular. Ditambah, service worker juga harus pakai format modular atau compat yang match.

Saya cek file service worker saya. Ternyata SW pakai:

importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js");

Sementara project utama pakai Firebase v9.6.1.

Versi Firebase tidak harus sama persis, tapi kalau terlalu jomplang, kadang FCM jadi drama.

Saya update semuanya ke versi terbaru.

Saya test lagi…

MASIH tidak muncul.

Mulai saya bertanya pada diri sendiri:

“Apa saya pernah menyakiti Firebase sebelumnya?”

 

Langkah 4 - Cek HTTPS (Wajib Hukumnya!)

FCM Web Push TIDAK BISA bekerja di:

  • HTTP

  • localhost tanpa flag tertentu

  • environment yang mixed content

Saya cek environment saya:

  • URL saya pakai HTTPS

  • Sertifikat valid

  • Tidak ada mixed content

Oke, aman.

Saya kirim push lagi…

Tidak muncul.

Oke, ini mulai absurd.

 

Langkah 5 - Cek Event Listener di Service Worker

Di service worker, saya punya kode:

messaging.onBackgroundMessage((payload) => {
  console.log("Message received.", payload);
});

Setelah saya debug, ternyata kode itu tidak pernah terpanggil.

Alasannya?

Karena saya lupa menambahkan handler:

self.addEventListener('push', function(event) {
  console.log('Push received');
});

Firebase memang akan generate push sendiri lewat messaging.onBackgroundMessage, tapi beberapa browser (terutama Chrome versi tertentu atau dengan konfigurasi tertentu) memerlukan event listener push.

Setelah menambah itu, test push lagi…

Tetap tidak muncul, tapi… console akhirnya muncul log dari service worker.

Artinya SW sudah benar-benar aktif 

 

Langkah 6 - Cek Payload Push (Masalah yang Paling Menjebak!)

Saya membuka FCM message inspector.

Payload saya:

{
  "notification": {
    "title": "Test",
    "body": "Hello!"
  }
}

Ternyata, untuk FCM Web Push, kadang notifikasi tidak muncul jika payload tidak memiliki field data dengan struktur tertentu.

Terutama jika service worker tidak menampilkan notifikasi secara manual.

Solusinya:

  1. Gunakan payload data

  2. Tampilkan notifikasi secara manual di SW

Akhirnya saya ubah payload menjadi:

{
  "data": {
    "title": "Test",
    "body": "Hello World"
  }
}

Dan di service worker:

messaging.onBackgroundMessage((payload) => {
  const { title, body } = payload.data;
  self.registration.showNotification(title, {
    body,
    icon: "/icon.png"
  });
});

Saya test push…

MUNCUL!

Akhirnya… setelah 2 jam debugging dan hampir menyalahkan takdir.

 

Penyebab FCM Web Push Tidak Muncul - Rangkuman Singkat

Kalau kamu malas membaca cerita panjang di atas, ini rangkuman masalah paling umum:

✔ 1. Permission not granted

Browser diam-diam mem-block website.

✔ 2. Service worker tidak aktif

File tidak di-root, path salah, redundant.

✔ 3. Versi Firebase tidak cocok

Mismatch antara SDK client dan SW.

✔ 4. Tidak pakai HTTPS

Wajib untuk production.

✔ 5. Payload FCM salah format

Terutama jika hanya pakai notification, bukan data.

✔ 6. Tidak menampilkan notif secara manual

Perlu panggil showNotification() di SW.

✔ 7. Token berubah

Harus re-generate token setelah update SW atau permission.

✔ 8. Browser update baru

Kadang Chrome update diam-diam mengubah behaviour SW.

 

Tips Tambahan Dari Pengalaman Pribadi

Gunakan DevTools → Application → Service Worker Panel

Untuk melihat:

  • SW aktif atau tidak

  • Logs

  • Push simulation (fitur sangat berguna!)

Gunakan fitur “Push” di DevTools

Bisa mengirim event push custom ke SW untuk memastikan SW bekerja.

Hapus Service Worker lama

Kadang SW lama menghantui project.

Gunakan:

navigator.serviceWorker.getRegistrations().then(regs => {
  regs.forEach(reg => reg.unregister());
});

Cek background log

Di Chrome:
DevTools → Application → Service Workers → “Open in new DevTools window”

Log SW tidak muncul di console biasa.

 

FCM Itu Powerful, Tapi Kadang Drama

Setelah berjam-jam debugging, saya belajar satu hal:

Masalah FCM Web Push sering bukan karena Firebase, tapi karena service worker.

Service worker itu seperti satpam komplek:

  • Kalau dia tidak aktif, tidak ada yang masuk

  • Kalau dia salah lokasi, tidak bisa kerja

  • Kalau dia salah versi, jadi tidak paham bahasa yang dipakai

Setelah mengerti cara kerja SW, FCM Web Push sebenarnya cukup stabil.

Walaupun ya… kadang tetap bikin frustasi.

Semoga pengalaman pribadi saya ini bisa membantu kamu yang lagi menghadapi FCM Web Push yang hilang tanpa kabar. Jangan menyerah, browser kadang cuma butuh perhatian lebih.

di

Tidak ada komentar:

Posting Komentar