Membangun Sistem Notifikasi Real-Time dengan Firebase Cloud Messaging

Setup Firebase Project

Buat project di Firebase Console, lalu aktifkan Firebase Cloud Messaging (FCM). Untuk backend, siapkan kredensial service account dengan aman.

Pada frontend, install Firebase SDK:

npm install firebase

Kemudian inisialisasi Firebase menggunakan konfigurasi dari project.

Mendapatkan Device Token

Aplikasi perlu meminta permission notifikasi kepada pengguna. Setelah permission diberikan, gunakan getToken() untuk mendapatkan FCM token.

Token tersebut sebaiknya dikirim dan disimpan di server berdasarkan user atau device. Dengan begitu, backend dapat mengirim notifikasi ke perangkat tertentu.

Service Worker untuk Web Push

Untuk notifikasi web, buat file firebase-messaging-sw.js di root project. Service worker menangani pesan ketika aplikasi berada di background.

Konfigurasikan juga VAPID key dan pastikan service worker terdaftar dengan benar agar browser dapat menerima push notification.

Mengirim Notifikasi dari Server

Gunakan Firebase Admin SDK pada backend:

npm install firebase-admin

Setelah SDK diinisialisasi menggunakan service account, backend dapat mengirim notifikasi melalui Firebase Messaging.

Payload dapat berisi token tujuan, title, body, dan data tambahan yang dibutuhkan aplikasi.

Topic-Based Notifications

Jika notifikasi perlu dikirim kepada banyak pengguna sekaligus, gunakan FCM topics.

Pengguna dapat di-subscribe ke topic tertentu, misalnya promo, news, atau order-update. Backend kemudian dapat mengirim satu pesan ke topic tersebut tanpa perlu mengirim request satu per satu.

Pendekatan ini lebih praktis untuk kebutuhan broadcast dengan banyak penerima.

Foreground dan Background

Penanganan notifikasi berbeda berdasarkan kondisi aplikasi.

Saat aplikasi berada di foreground, gunakan listener seperti onMessage() untuk menerima pesan dan menampilkan custom UI.

Saat berada di background, service worker dapat menangani pesan dan menampilkan system notification.

Pastikan notifikasi memiliki click action yang mengarahkan pengguna langsung ke halaman atau konten yang relevan.

Best Practice FCM

Beberapa hal penting dalam implementasi FCM:

• Simpan FCM token berdasarkan user atau device.

• Tangani token yang sudah tidak valid.

• Jangan menyimpan service account key di frontend.

• Gunakan environment variable untuk credential backend.

• Hindari mengirim notifikasi terlalu sering.

• Gunakan topic untuk kebutuhan broadcast.

• Buat notifikasi yang memiliki tujuan jelas dan relevan.

Kesimpulan

Firebase Cloud Messaging memudahkan pengembangan sistem notifikasi real-time untuk web dan mobile. Dengan device token, service worker, topic messaging, serta backend yang aman, FCM dapat digunakan untuk membangun sistem notifikasi yang scalable dan responsif.