firebase_cloud_messaging_push_notification_foreground_handler.ts

1import { initializeApp, FirebaseApp } from "firebase/app";
2import { getMessaging, Messaging, getToken, onMessage, MessagePayload } from "firebase/messaging";
3
4// Your web app's Firebase configuration
5// Replace the placeholder values with your project's credentials
6const firebaseConfig = {
7  apiKey: "YOUR_API_KEY",
8  authDomain: "YOUR_AUTH_DOMAIN",
9  projectId: "YOUR_PROJECT_ID",
10  storageBucket: "YOUR_STORAGE_BUCKET",
11  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
12  appId: "YOUR_APP_ID"
13};
14
15// Initialize Firebase
16const app: FirebaseApp = initializeApp(firebaseConfig);
17
18// Initialize Firebase Cloud Messaging and get a reference to the service
19const messaging: Messaging = getMessaging(app);
20
21/**
22 * Request permission and get the FCM registration token
23 */
24export const requestPermissionAndGetToken = async (): Promise<void> => {
25  try {
26    const permission = await Notification.requestPermission();
27    if (permission === 'granted') {
28      console.log('Notification permission granted.');
29      
30      // Get registration token. Initially this makes a network call, once retrieved
31      // subsequent calls to getToken will return from cache.
32      const currentToken = await getToken(messaging, { 
33        vapidKey: 'YOUR_PUBLIC_VAPID_KEY' 
34      });
35      
36      if (currentToken) {
37        console.log('FCM Token:', currentToken);
38        // Send this token to your server to update your database
39      } else {
40        console.log('No registration token available. Request permission to generate one.');
41      }
42    } else {
43      console.log('Unable to get permission to notify.');
44    }
45  } catch (error) {
46    console.error('An error occurred while retrieving token:', error);
47  }
48};
49
50/**
51 * Handle incoming messages when the app is in the foreground
52 */
53onMessage(messaging, (payload: MessagePayload) => {
54  console.log('Message received. ', payload);
55  // Customize notification handling here
56});