Setup FCM untuk handle Silent Notifications

Halo kawan, gimana kabarnya nih?. semoga baik-baik aja ya. Kali ini aku akan berbagi tutorial tentang cara Setup FCM untuk handle Silent Notifications. Disini nanti aku akan sharing gimana caranya setup Firebase Cloud Messaging(FCM) untuk handle silent notifications di client dan juga cara mengirimkan silent notifications dari server. oke, gausah lama-lama mari kita ke tutorialnya kuyy.

Apa Itu Silent Notifications?

Silent Notifications adalah sebuah notifikasi senyap yang tidak menampilkan tampilan notifikasi pada perangkat kita. ketika kita menggunakan push notifications, pastinya akan muncul pop-up notifikasi di perangkat kita kan?. Nah, untuk silent notifications sendiri konsepnya sama dengan push notifications. perbedaannya adalah silent notifications tidak menampilkan pop-up notifikasi di perangkat kita.

Apa itu Firebase Cloud Messaging? (FCM)

Firebase Cloud Messaging(FCM) adalah sebuah service dari firebase yang memungkinkan kita untuk mengirim notifications

Setup FCM di Client Side

Untuk setup FCM di client side, hal pertama yang perlu disiapkan adalah akun firebase kalian bisa membuatnya disini. setelah itu kalian bisa buat project baru di firebase menggunakan akun kalian. Untuk nama projectnya terserah, tapi untuk kali ini saya beri nama projectnya "order-online-now". setelah project dibuat, kalian bisa pilih add app lalu kalian pilih platformnya "web". setelah itu kalian isi nama app kalian. disini saya beri nama app saya dengan "order-online"

kalian bisa centang "also setup firebase hosting for this app" agar firebase menyiapkan hosting untuk aplikasi web kita. setelah itu klik "register app" untuk mendaftarkan app kita di firebase.

Instalasi React dan firebase

Langkah selanjutnya kita akan menginstall React dan firebase di computer kita. Untuk menginstall react. kita menjalankan perintah

npm create vite@latest

setelah itu beri nama project kalian. disini saya beri nama projectnya "order payment".Lalu pilih framework nya React dan pilih variant TypeScript + SWC

Setup Firebase

Setelah menginstall React. selanjutnya kita akan setup Firebase di project React kita. pertama-tama kalian bisa menjalankan perintah

npm install firebase

bisa pergi ke project settings di firebase.

lalu di tab General kalian bisa scroll kebawah ke section your apps lalu kalian bisa copy code ini di firebase

setelah itu buat file /src/config/firebase.ts dan paste kode tersebut di firebase.ts

Mengaktifkan FCM di Firebase

Langkah selanjutnya kita bisa mengaktifkan FCM di firebase . Caranya, pergi ke /src/config/firebase.ts lalu tambahkan kode ini

import { getMessaging } from "firebase/messaging";

// kode sebelumnya

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

export { messaging };

Lalu selanjutnya kita bisa membuat sebuah service yang akan menangani semua yang berhubungan dengan FCM. kita bisa buat file /src/service/fcm.service.ts . Lalu kita bisa tulis

import { messaging } from '../firebase';
import { getToken, onMessage } from 'firebase/messaging';

// Fungsi untuk meminta token FCM
export const requestForToken = async (): Promise<string | null> => {
  try {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
      console.warn('Notification permission not granted');
      return null;
    }

    const token = await getToken(messaging, {
      vapidKey: 'YOUR_VAPID_KEY', // Gantilah dengan VAPID Key dari Firebase
    });

    if (token) {
      console.log('FCM Token:', token);
      return token;
    } else {
      console.warn('No FCM token received');
      return null;
    }
  } catch (error) {
    console.error('Error requesting FCM token:', error);
    return null;
  }
};

// Fungsi untuk menangkap pesan dari backend
export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      console.log('[FCM Foreground] Message received:', payload);
      resolve(payload);
    });
  });

Disini akan saya jelaskan mengenai Service diatas.

• requestForToken() digunakan untuk meminta token dari Firebase. Token ini nanti akan digunakan sebagai identifier oleh backend untuk mengirim silent notifications. ibaratnya token ini akan dijadikan alamat oleh backend untuk mengirim silent notifications
• onMessageListener() digunakan untuk menangkap message yang dikirimkan oleh backend.

Perlu diingat bahwa onMessageListener() ini hanya akan berjalan ketika kita berada di browser. ketika kita meninggalkan browser, maka onMessageListener akan berhenti berjalan.