How to Set Up Firebase Cloud Messaging (FCM)

1// src/firebase.ts
2import { initializeApp } from 'firebase/app';
3import { getMessaging } from 'firebase/messaging';
4
5const firebaseConfig = {
6  apiKey: 'YOUR_API_KEY',
7  authDomain: 'YOUR_PROJECT.firebaseapp.com',
8  projectId: 'YOUR_PROJECT_ID',
9  storageBucket: 'YOUR_PROJECT.appspot.com',
10  messagingSenderId: 'YOUR_SENDER_ID',
11  appId: 'YOUR_APP_ID'
12};
13
14const app = initializeApp(firebaseConfig);
15export const messaging = getMessaging(app);

1// public/firebase-messaging-sw.js
2importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js');
3importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-messaging-compat.js');
4
5firebase.initializeApp({
6  apiKey: 'YOUR_API_KEY',
7  authDomain: 'YOUR_PROJECT.firebaseapp.com',
8  projectId: 'YOUR_PROJECT_ID',
9  storageBucket: 'YOUR_PROJECT.appspot.com',
10  messagingSenderId: 'YOUR_SENDER_ID',
11  appId: 'YOUR_APP_ID'
12});
13
14const messaging = firebase.messaging();
15
16messaging.onBackgroundMessage((payload) => {
17  const notificationTitle = payload.notification?.title || 'New notification';
18  const notificationOptions = {
19    body: payload.notification?.body || '',
20    icon: '/icon-192x192.png'
21  };
22  self.registration.showNotification(notificationTitle, notificationOptions);
23});

1// src/notifications.ts
2import { getToken, onMessage } from 'firebase/messaging';
3import { messaging } from './firebase';
4
5const VAPID_KEY = 'YOUR_VAPID_PUBLIC_KEY';
6
7export async function requestNotificationPermission(): Promise<string | null> {
8  const permission = await Notification.requestPermission();
9
10  if (permission !== 'granted') {
11    console.warn('Notification permission denied');
12    return null;
13  }
14
15  const token = await getToken(messaging, { vapidKey: VAPID_KEY });
16  console.log('FCM Token:', token);
17
18  // Send this token to your backend to store for this user
19  // await saveTokenToServer(token);
20
21  return token;
22}

1// src/notifications.ts (continued)
2export function listenForMessages(): void {
3  onMessage(messaging, (payload) => {
4    console.log('Foreground message received:', payload);
5
6    const title = payload.notification?.title || 'Notification';
7    const body = payload.notification?.body || '';
8
9    // Option 1: Show a browser notification manually
10    if (Notification.permission === 'granted') {
11      new Notification(title, { body, icon: '/icon-192x192.png' });
12    }
13
14    // Option 2: Show an in-app toast/alert
15    // showToast({ title, body });
16  });
17}