How to Send Notifications to a Topic in Firebase

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  if (permission !== 'granted') {
11    console.log('Notification permission denied');
12    return null;
13  }
14
15  const token = await getToken(messaging, {
16    vapidKey: 'YOUR_VAPID_KEY'
17  });
18
19  // Store token in Firestore for server-side subscription
20  const user = getAuth().currentUser;
21  if (user && token) {
22    await setDoc(doc(db, 'fcmTokens', user.uid), {
23      token,
24      updatedAt: new Date()
25    });
26  }
27
28  return token;
29}

1import { initializeApp } from 'firebase-admin/app';
2import { getMessaging } from 'firebase-admin/messaging';
3import { getFirestore } from 'firebase-admin/firestore';
4import { onDocumentCreated } from 'firebase-functions/v2/firestore';
5import { logger } from 'firebase-functions/v2';
6
7initializeApp();
8const messaging = getMessaging();
9const db = getFirestore();
10
11// Subscribe a user to a topic when they update their preferences
12export const manageTopicSubscription = onDocumentCreated(
13  'userPreferences/{userId}',
14  async (event) => {
15    const userId = event.params.userId;
16    const prefs = event.data?.data();
17
18    // Get the user's FCM token from Firestore
19    const tokenDoc = await db.collection('fcmTokens').doc(userId).get();
20    const token = tokenDoc.data()?.token;
21
22    if (!token) {
23      logger.warn('No FCM token found for user', { userId });
24      return;
25    }
26
27    // Subscribe to selected topics
28    const topics = prefs?.subscribedTopics || [];
29    for (const topic of topics) {
30      await messaging.subscribeToTopic([token], topic);
31      logger.info('Subscribed to topic', { userId, topic });
32    }
33  }
34);

1import { onCall, HttpsError } from 'firebase-functions/v2/https';
2import { getMessaging } from 'firebase-admin/messaging';
3import { logger } from 'firebase-functions/v2';
4
5const messaging = getMessaging();
6
7export const sendTopicNotification = onCall(async (request) => {
8  // Only allow admin users to send notifications
9  if (!request.auth?.token?.admin) {
10    throw new HttpsError('permission-denied', 'Admin access required');
11  }
12
13  const { topic, title, body, data } = request.data;
14
15  const message = {
16    topic: topic,
17    notification: {
18      title: title,
19      body: body
20    },
21    data: data || {},
22    webpush: {
23      notification: {
24        icon: '/icon-192.png',
25        click_action: 'https://your-app.com/notifications'
26      }
27    }
28  };
29
30  try {
31    const response = await messaging.send(message);
32    logger.info('Topic notification sent', { topic, messageId: response });
33    return { success: true, messageId: response };
34  } catch (error: any) {
35    logger.error('Failed to send topic notification', {
36      topic,
37      error: error.message
38    });
39    throw new HttpsError('internal', 'Failed to send notification');
40  }
41});

1import { getMessaging } from 'firebase-admin/messaging';
2
3const messaging = getMessaging();
4
5// Send to users subscribed to 'sports' AND 'news'
6async function sendConditionalNotification() {
7  const message = {
8    condition: "'sports' in topics && 'news' in topics",
9    notification: {
10      title: 'Sports News Update',
11      body: 'Check out the latest sports headlines'
12    }
13  };
14
15  await messaging.send(message);
16}
17
18// Send to 'deals' subscribers who are NOT in 'opted-out'
19async function sendDealsNotification() {
20  const message = {
21    condition: "'deals' in topics && !('opted-out' in topics)",
22    notification: {
23      title: 'New Deal Available',
24      body: 'A new exclusive deal has been posted'
25    }
26  };
27
28  await messaging.send(message);
29}

1import { getMessaging, onMessage } from 'firebase/messaging';
2
3const messaging = getMessaging();
4
5// Handle foreground notifications
6onMessage(messaging, (payload) => {
7  console.log('Foreground notification:', payload);
8
9  // Show browser notification manually
10  if (payload.notification) {
11    new Notification(payload.notification.title || 'New message', {
12      body: payload.notification.body,
13      icon: '/icon-192.png'
14    });
15  }
16
17  // Handle data payload
18  if (payload.data) {
19    console.log('Data payload:', payload.data);
20    // Update your app state based on the data
21  }
22});
23
24// For background notifications, add this to firebase-messaging-sw.js:
25// importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js');
26// importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-messaging-compat.js');
27// firebase.initializeApp({ ... });
28// const messaging = firebase.messaging();
29// messaging.onBackgroundMessage((payload) => {
30//   self.registration.showNotification(payload.notification.title, {
31//     body: payload.notification.body
32//   });
33// });