firebase_cloud_messaging_permission_request_and_token_retrieval.ts

1import { initializeApp } from "firebase/app";
2import { getMessaging, getToken, onMessage } from "firebase/messaging";
3
4// Your web app's Firebase configuration
5// For Firebase JS SDK v7.20.0 and later, measurementId is optional
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 = initializeApp(firebaseConfig);
17
18// Initialize Firebase Cloud Messaging and get a reference to the service
19const messaging = getMessaging(app);
20
21/**
22 * Request permission and get registration token
23 */
24export const requestPermissionAndGetToken = async () => {
25  try {
26    const permission = await Notification.requestPermission();
27    if (permission === 'granted') {
28      console.log('Notification permission granted.');
29      
30      // Get registration token. 
31      // 'vapidKey' can be found in the Firebase Console -> Project Settings -> Cloud Messaging
32      const currentToken = await getToken(messaging, { 
33        vapidKey: 'YOUR_PUBLIC_VAPID_KEY' 
34      });
35
36      if (currentToken) {
37        console.log('Registration token:', currentToken);
38        // Send this token to your server to send messages to this device
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 foreground messages
52 */
53onMessage(messaging, (payload) => {
54  console.log('Message received in foreground: ', payload);
55  // Customize notification handling here
56});