# Push Notifications on the Web for Conversations

## Push Notifications on the Web

Push notifications are an important part of the web experience. Users have grown accustomed to push notifications being part of virtually every app that they use. The Twilio Conversations JavaScript SDK can integrate Firebase Cloud Messaging (FCM) for push notifications.

Managing your push credentials is necessary, as your registration token is required for the Conversations SDK to be able to send any notifications through FCM. Let's go through the process of managing your push credentials.

## Step 1 - Enable push notifications for your Service instance

The default enabled flag for new Service instances for all Push Notifications is `false`. This means that Push will be disabled until you explicitly enable it. You can follow [this guide](/docs/conversations/push-notification-configuration) to do so.

## Step 2 - Configure Firebase

The developer must configure Firebase Cloud Messaging (FCM) before configuring notifications. Google provides a [Firebase Console](https://console.firebase.google.com/) to manage Firebase services and configurations.

### Create a project on Firebase

To use push notifications for your JavaScript app, you will need to create a project on the [Firebase Console](https://console.firebase.google.com/):

![Prompt to enter a project name with example 'my-awesome-project-id'.](https://docs-resources.prod.twilio.com/2c1c4be7d8c0c5f8d1d2f57ce8e65f2c61fae704faaf574bb92a1d2e4dd3b638.jpg)

### Get the project's configuration

The Firebase Cloud Messaging (FCM) requires configuration to initialize. The Firebase console has a way to create this configuration.

After you create a Firebase project, you can select the option to add Firebase to your web app. From the project overview page, under the text *"Get started by adding Firebase to your app"*, select the Web icon.

![Get started by adding Firebase to your app with icons for iOS, Android, web, and Unity.](https://docs-resources.prod.twilio.com/ea8fbcb964c1209aa45e55770ce672af261e56342106f3f8d5dac0427dc616da.jpg)

As a next step, register your app. Give the app a nickname and click the **Register app** button.

![Firebase setup step 1, register app with nickname 'My web app' and optional hosting setup.](https://docs-resources.prod.twilio.com/9a9da2a2363e54108ee603d6f32586d6709e83419efa45deae52db878a1da29b.png)

Once the app is registered, a customized code snippet will be displayed.

![Instructions for adding Firebase SDK using npm with example configuration code.](https://docs-resources.prod.twilio.com/60cc3d963c707e0ad364adae52192cf4a32752b2673e2fa2050e11e0ee8c5fd7.jpg)

This dialog contains sample JavaScript code with filled-in parameters that you can use in your newly created project.

Save this sample code with configuration - we will use it later in this guide.

## Step 3 - Upload your API Key to Twilio

Now that we have our app configured to receive push notifications, let's upload our API Key by creating a [Credential resource.](/docs/notify/api/credential-resource) Check out [the Credentials page in the Twilio console](https://www.twilio.com/console/notify/credentials/create) page to generate a credential SID using your API key. Click the **Create** button.

![Form to create new credential with fields for friendly name, type, and FCM secret.](https://docs-resources.prod.twilio.com/ffa3fbb40b808bd25ea91c15f7e72ea28c9424861c70c2124eb1672cd37627e7.png)

## Step 4 - Pass the API Credential Sid in your Access Token

This step is to ensure that your Conversations JS SDK client [Access Token](/docs/iam/access-tokens#token-anatomy) includes the correct `credential_sid` - the one you created in Step 3 above. Each of the Twilio server-side SDKs enables you to add the `push_credential_sid`. You can see the relevant documentation for your preferred server-side SDK for the details. Here is an example using the Node.js Twilio SDK:

```javascript
const chatGrant = new ChatGrant({ 
 serviceSid: ConversationServiceSid, 
 pushCredentialSid: FCM_Credential_Sid 
});

```

## Step 5 - Initialize Firebase in your web app

Now it's time to initialize the Firebase with the sample code from Step 2 above.

In your web app's early initialization sequence, use the sample code (and do not forget to include/import the Firebase library provided by Google). We recommend including an additional check for the correct import of the Firebase libraries.

```javascript
  // Initialize Firebase
  var config = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
  if (firebase) {
    firebase.initializeApp(config);
  }
```

## Step 6 - Request push permissions from the user and get your FCM token

In this step, we are requesting permission from the user to subscribe to and to display notifications. We recommend adding checks for the correct initialization of Firebase.

```javascript
 if (firebase && firebase.messaging()) {
      // requesting permission to use push notifications
      firebase.messaging().requestPermission().then(() => {
        // getting FCM token
        firebase.messaging().getToken().then((fcmToken) => {
          // continue with Step 7 here 
          // ... 
          // ... 
        }).catch((err) => {
          // can't get token
        });
      }).catch((err) => {
        // can't request permission or permission hasn't been granted to the web app by the user
      });
    } else {
      // no Firebase library imported or Firebase library wasn't correctly initialized
    }
```

## Step 7 - Pass the FCM token to the Conversations JS SDK and register an event listener for new push arrival

If you got to this step, then you have Firebase correctly configured and an FCM token ready to be registered with Conversations SDK.

This step assumes that you have Conversation's Client created with the correct Access Token from Step 4.

```javascript
// passing FCM token to the `conversationClientInstance` to register for push notifications
conversationClientInstance.setPushRegistrationId('fcm', fcmToken);

// registering event listener on new message from Firebase to pass it to the Conversations SDK for parsing
firebase.messaging().onMessage(payload => {
    conversationClientInstance.handlePushNotification(payload);
});
```