firebase_cloud_messaging_push_notification_permission_and_token.ts

1import { initializeApp, FirebaseApp } from "firebase/app";
2import { getMessaging, getToken, onMessage, Messaging } from "firebase/messaging";
3
4// Your web app's Firebase configuration
5// Replace these with your project's actual values from the Firebase Console
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    
28    if (permission === 'granted') {
29      console.log('Notification permission granted.');
30      
31      // Get registration token. 
32      // 'vapidKey' can be found in the Firebase Console -> Project Settings -> Cloud Messaging
33      const token = await getToken(messaging, { 
34        vapidKey: 'YOUR_PUBLIC_VAPID_KEY' 
35      });
36
37      if (token) {
38        console.log('FCM Token:', token);
39        // Send this token to your server to subscribe the user to topics or send individual notifications
40      } else {
41        console.log('No registration token available. Request permission to generate one.');
42      }
43    } else {
44      console.error('Unable to get permission to notify.');
45    }
46  } catch (error) {
47    console.error('An error occurred while retrieving token:', error);
48  }
49};
50
51/**
52 * Handle incoming messages when the app is in the foreground
53 */
54onMessage(messaging, (payload) => {
55  console.log('Message received. ', payload);
56  // Customize notification handling here
57});