Skip to contentSkip to navigationSkip to topbar
On this page

Push Notifications on Web for Programmable Chat


(error)

Danger

Programmable Chat has been deprecated and is no longer supported. Instead, we'll be focusing on the next generation of chat: Twilio Conversations. Find out more about the EOL process here(link takes you to an external page).

If you're starting a new project, please visit the Conversations Docs to begin. If you've already built on Programmable Chat, please visit our Migration Guide to learn about how to switch.


Push Notifications on Web

push-notifications-on-web page anchor

Push notifications are an important part of the web experience. Users have grown accustomed to having push notifications be a part of virtually every app that they use. The JavaScript Programmable Chat SDK is built to have Firebase Cloud Messaging (FCM) push notifications integrated into it. Managing your push credentials is necessary as your registration token is required for the Chat 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

step-1---enable-push-notifications-for-your-service-instance page anchor

IMPORTANT: 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. Follow this guide to do so.


Step 2 - Configure Firebase

step-2---configure-firebase page anchor

The developer must configure Firebase Cloud Messaging (FCM) before configuring notifications. Google provides a Firebase Console(link takes you to an external page) to manage Firebase services and configurations.

Create a project on Firebase

create-a-project-on-firebase page anchor

To use push notifications for your Android apps, you will need to create a project on the Firebase Console(link takes you to an external page):

Create A Firebase Project.

Get project's configuration

get-projects-configuration page anchor

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

After you create a Firebase project, you can select option to add Firebase to your web app:

Get Started With Firebase.

Clicking the right-most link ("Add Firebase to your web app") will bring up this dialog:

AddFirebaseToYourWebApp.width-500.

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

step-3---upload-your-api-key-to-twilio page anchor

Now that we have our app configured to receive push notifications, let's upload our API Key by creating a Credential resource. Check out the Credentials page in the Twilio console page to generate a credential SID using your API key.

API Key.

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

step-4---pass-the-api-credential-sid-in-your-access-token page anchor

This step is to ensure that your Chat JS SDK client Access Token includes the correct credential_sid - the one you created in Step 3 above. Each of the Twilio Helper Libraries enables you to add the push_credential_sid. Please see the relevant documentation for your preferred Helper Library for the details. Here is an example using the Node.js Twilio helper Library:

1
var chatGrant = new ChatGrant({
2
serviceSid: ChatServicesSid,
3
pushCredentialSid: FCM_Credential_Sid,
4
});

Step 5 - Initialize Firebase in your web app

step-5---initialize-firebase-in-your-web-app page anchor

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

In your web app's early initialization sequence, call 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.

1
// Initialize Firebase
2
var config = {
3
apiKey: "...",
4
authDomain: "...",
5
databaseURL: "...",
6
projectId: "...",
7
storageBucket: "...",
8
messagingSenderId: "..."
9
};
10
if (firebase) {
11
firebase.initializeApp(config);
12
}

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

step-6---request-push-permissions-from-the-user-and-get-your-fcm-token page anchor

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

1
if (firebase && firebase.messaging()) {
2
// requesting permission to use push notifications
3
firebase.messaging().requestPermission().then(() => {
4
// getting FCM token
5
firebase.messaging().getToken().then((fcmToken) => {
6
// continue with Step 7 here
7
// ...
8
// ...
9
}).catch((err) => {
10
// can't get token
11
});
12
}).catch((err) => {
13
// can't request permission or permission hasn't been granted to the web app by the user
14
});
15
} else {
16
// no Firebase library imported or Firebase library wasn't correctly initialized
17
}

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

step-7---pass-the-fcm-token-to-the-chat-js-sdk-and-register-an-event-listener-for-new-push-arrival page anchor

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

This step assumes that you have Chat Client created with correct Access Token from Step 4.

1
// passing FCM token to the `chatClientInstance` to register for push notifications
2
chatClientInstance.setPushRegistrationId('fcm', fcmToken);
3
4
// registering event listener on new message from firebase to pass it to the Chat SDK for parsing
5
firebase.messaging().onMessage(payload => {
6
chatClientInstance.handlePushNotification(payload);
7
});
(information)

Info

Please note: Make sure to register service workers for multiple Chat channels in different tabs. The service worker needs to be running in order to get push notifications via FCM when a Chat tab is in the background.

Next: Webhook Events

Need some help?

Terms of service

Copyright © 2024 Twilio Inc.