Generate a device token for web browsers

• A web app served over HTTPS (required for service workers).
• Firebase added to your web app. Follow the Add Firebase to your web project guide if you haven't already.
• A VAPID key pair configured in the Firebase console. Go to Project Settings > Cloud Messaging > Web Push certificates and click Generate Key Pair if you don't have one.

Install the Firebase SDK and initialize Cloud Messaging in your app:

1
import { initializeApp } from "firebase/app";
2
import { getMessaging } from "firebase/messaging";
3

4
const firebaseConfig = {
5
  // Your Firebase project configuration
6
};
7

8
const app = initializeApp(firebaseConfig);
9
const messaging = getMessaging(app);

FCM requires a service worker file named firebase-messaging-sw.js in the root of your domain. Create the file with the following content:

1
importScripts("https://www.gstatic.com/firebasejs/11.8.1/firebase-app-compat.js");
2
importScripts("https://www.gstatic.com/firebasejs/11.8.1/firebase-messaging-compat.js");
3

4
firebase.initializeApp({
5
  // Your Firebase project configuration
6
});
7

8
const messaging = firebase.messaging();

Before retrieving a token, request notification permission from the user. The browser displays a permission prompt the first time this is called.

1
const permission = await Notification.requestPermission();
2
if (permission === "granted") {
3
  console.log("Notification permission granted.");
4
}

After the user grants permission, call getToken() with your VAPID key to retrieve the registration token:

1
import { getMessaging, getToken } from "firebase/messaging";
2

3
const messaging = getMessaging();
4
getToken(messaging, { vapidKey: "YOUR_PUBLIC_VAPID_KEY" }).then((currentToken) => {
5
  if (currentToken) {
6
    // Send this token to Twilio using the DeviceRegistrations API
7
    // or include it directly in a PushNotifications request.
8
  } else {
9
    console.log("No registration token available. Request permission to generate one.");
10
  }
11
}).catch((err) => {
12
  console.log("An error occurred while retrieving token.", err);
13
});

Replace YOUR_PUBLIC_VAPID_KEY with the public key from your Firebase console under Project Settings > Cloud Messaging > Web Push certificates.

FCM may rotate the registration token at any time. Call getToken() on each page load to ensure you always have the current token, and send any updated tokens to your server.

After you retrieve the token, include it in Twilio Push Notifications API requests using "provider": "FCM". You can either:

• Send directly: Include the token in the to array when sending a notification.
• Register the device: Store the token as a DeviceRegistration so you can send to Users by userId.

• Send a push notification using the token.
• Obtain FCM credentials to upload to Twilio.
• Review the Firebase Cloud Messaging web setup guide for additional configuration options.