# Generate a device token for web browsers

> \[!IMPORTANT]
>
> The Push Notifications API is currently available as a
> Private Beta product. The information contained in this document is subject to change. You acknowledge
> and agree that your use of the Twilio Push Notifications API is subject to the terms of the [Services in
> Private Beta](https://www.twilio.com/en-us/legal/service-country-specific-terms/private-beta). This
> means that some features are not yet implemented and others may be changed before the product is
> declared as Generally Available. Private Beta products are not covered by the Twilio Support Terms or
> Twilio Service Level Agreement.

To send push notifications to web browsers with Twilio, your web app needs a Firebase Cloud Messaging (FCM) registration token. This token uniquely identifies the browser instance. You then send this token to Twilio by including it in the `token` field when [sending a notification](/docs/push-notifications/api/notification-resource#send-a-pushnotification) or [registering a device](/docs/push-notifications/api/device-registration-resource#register-a-device).

FCM supports all major browsers, including Chrome, Firefox, Edge, Opera, and Safari.

## Prerequisites

* A web app served over HTTPS (required for service workers).
* Firebase added to your web app. Follow the [Add Firebase to your web project](https://firebase.google.com/docs/web/setup) 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.

## Add the FCM SDK

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

```javascript
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

const firebaseConfig = {
  // Your Firebase project configuration
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
```

## Create the service worker

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

```javascript {title:"firebase-messaging-sw.js"}
importScripts("https://www.gstatic.com/firebasejs/11.8.1/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/11.8.1/firebase-messaging-compat.js");

firebase.initializeApp({
  // Your Firebase project configuration
});

const messaging = firebase.messaging();
```

> \[!NOTE]
>
> Update the Firebase SDK version numbers in the `importScripts` URLs to match the version you use in your app.

## Request notification permission

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

```javascript
const permission = await Notification.requestPermission();
if (permission === "granted") {
  console.log("Notification permission granted.");
}
```

## Retrieve the FCM registration token

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

```javascript
import { getMessaging, getToken } from "firebase/messaging";

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

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

## Handle token refresh

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.

## Send the token to Twilio

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](/docs/push-notifications/api/notification-resource#send-a-pushnotification).
* **Register the device**: Store the token as a [DeviceRegistration](/docs/push-notifications/api/device-registration-resource#register-a-device) so you can send to Users by `userId`.

## Next steps

* [Send a push notification](/docs/push-notifications/send-a-push) using the token.
* [Obtain FCM credentials](/docs/push-notifications/fcm-credentials) to upload to Twilio.
* Review the [Firebase Cloud Messaging web setup guide](https://firebase.google.com/docs/cloud-messaging/js/client) for additional configuration options.