How to Send Push Notifications with Firebase

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  messagingSenderId: 'YOUR_SENDER_ID',
10  appId: 'YOUR_APP_ID'
11})
12
13const messaging = firebase.messaging()
14
15messaging.onBackgroundMessage((payload) => {
16  console.log('Background message:', payload)
17  const { title, body, icon } = payload.notification ?? {}
18  self.registration.showNotification(title ?? 'New notification', {
19    body: body ?? '',
20    icon: icon ?? '/icon-192.png'
21  })
22})

1import { getMessaging, getToken } from 'firebase/messaging'
2import { getFirestore, doc, setDoc } from 'firebase/firestore'
3import { getAuth } from 'firebase/auth'
4
5const messaging = getMessaging()
6const db = getFirestore()
7
8async function requestNotificationPermission() {
9  const permission = await Notification.requestPermission()
10
11  if (permission !== 'granted') {
12    console.log('Notification permission denied.')
13    return null
14  }
15
16  const token = await getToken(messaging, {
17    vapidKey: 'YOUR_VAPID_KEY_FROM_FIREBASE_CONSOLE'
18  })
19
20  // Store the token linked to the user
21  const user = getAuth().currentUser
22  if (user && token) {
23    await setDoc(
24      doc(db, 'fcmTokens', user.uid),
25      {
26        token,
27        userId: user.uid,
28        updatedAt: new Date(),
29        platform: 'web'
30      },
31      { merge: true }
32    )
33  }
34
35  console.log('FCM token:', token)
36  return token
37}

1import { getMessaging, onMessage } from 'firebase/messaging'
2
3const messaging = getMessaging()
4
5onMessage(messaging, (payload) => {
6  console.log('Foreground message:', payload)
7
8  const { title, body } = payload.notification ?? {}
9
10  // Option 1: Show a native notification manually
11  if (Notification.permission === 'granted') {
12    new Notification(title ?? 'New message', {
13      body: body ?? '',
14      icon: '/icon-192.png'
15    })
16  }
17
18  // Option 2: Show an in-app toast or update UI
19  // showToast({ title, body })
20})

1import { onCall, HttpsError } from 'firebase-functions/v2/https'
2import { initializeApp } from 'firebase-admin/app'
3import { getMessaging } from 'firebase-admin/messaging'
4import { getFirestore } from 'firebase-admin/firestore'
5
6initializeApp()
7
8export const sendNotification = onCall(async (request) => {
9  if (!request.auth) {
10    throw new HttpsError('unauthenticated', 'Must be signed in.')
11  }
12
13  const { targetUserId, title, body } = request.data
14
15  // Get the target user's FCM token from Firestore
16  const tokenDoc = await getFirestore()
17    .doc(`fcmTokens/${targetUserId}`)
18    .get()
19
20  if (!tokenDoc.exists) {
21    throw new HttpsError('not-found', 'User has no registered device.')
22  }
23
24  const { token } = tokenDoc.data()!
25
26  const message = {
27    notification: { title, body },
28    data: { targetUserId, senderId: request.auth.uid },
29    token
30  }
31
32  try {
33    const response = await getMessaging().send(message)
34    return { success: true, messageId: response }
35  } catch (error: any) {
36    if (error.code === 'messaging/registration-token-not-registered') {
37      // Token is stale — delete it
38      await getFirestore().doc(`fcmTokens/${targetUserId}`).delete()
39    }
40    throw new HttpsError('internal', error.message)
41  }
42})

1import { getMessaging } from 'firebase-admin/messaging'
2
3const messaging = getMessaging()
4
5// Subscribe a user's token to a topic (server-side)
6async function subscribeToTopic(token: string, topic: string) {
7  await messaging.subscribeToTopic(token, topic)
8}
9
10// Send to all subscribers of a topic
11async function sendToTopic(topic: string, title: string, body: string) {
12  const message = {
13    notification: { title, body },
14    topic: topic // e.g., 'news', 'deals', 'product-updates'
15  }
16
17  const response = await messaging.send(message)
18  console.log('Sent to topic:', response)
19  return response
20}
21
22// Send to multiple topics with a condition
23async function sendToCondition(title: string, body: string) {
24  const message = {
25    notification: { title, body },
26    condition: "'deals' in topics && 'electronics' in topics"
27  }
28
29  const response = await messaging.send(message)
30  return response
31}