Skip to content

Latest commit

 

History

History

notifications-example

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 

How to send web push notifications to a browser with Firebase

This example project accompanies our Set up web push notifications with Firebase Cloud Messaging tutorial.

[!TIP] > Download this example project as a zip file

Prerequisites

To run this example project, you need:

How to run the example

  1. Clone or download this project.
  2. In the root directory of the project, run:
    firebase login
    if you are not already logged in, and log in to your account
  3. Set up Firebase hosting:
    firebase init hosting
    Select to either use an existing Firebase project or create a new one. If you create a new one, or you haven't yet set up Firebase Cloud Messaging in the TalkJS dashboard, see Configure Firebase Cloud Messaging in our docs.
  4. Answer the prompted questions:
    1. Select to use the default (public) as your public directory
    2. Select Yes for "Configure as a single-page app?"
    3. Choose whether to set up automatic builds and deploys with GitHub
    4. Select No for "File public/index.html already exists. Overwrite?"
  5. Once initialization is complete, open the Firebase console and select your project.
  6. On the Project Overview page, click the + icon to add a new app. For the platform, select Web.
  7. Pick a name for your app.
  8. After registering the app name, you will see some code samples for adding the Firebase SDK. Copy the firebaseConfig JavaScript object. It will look something like this:
    {
      "apiKey": "<FIREBASE_API_KEY>",
      "authDomain": "<FIREBASE_APP_NAME>.firebaseapp.com",
      "projectId": "<FIREBASE_APP_NAME>",
      "storageBucket": "<FIREBASE_APP_NAME>.firebasestorage.app",
      "messagingSenderId": "<SENDER_ID>",
      "appId": "<FIREBASE_APP_ID>"
    }
  9. Inside public/index.html (lines 168-175) and public/firebase-messaging-sw.js (lines 9-16), replace the placeholder object with your firebaseConfig object.
  10. In the Firebase console, click the gear icon and go to Project Settings. In the Cloud Messaging tab, go to the Web configuration section and then click Generate Key Pair.
  11. Copy the value under “Key Pair”. This is the public key used to encrypt web push notifications.
  12. Inside public/index.html (line 203), paste the value inside the string as the value for vapidKey.
  13. Inside public/index.html, replace <APP_ID> with your app ID, which you can find in the Settings tab of the TalkJS dashboard.
  14. In the root directory of the project, run:
    firebase deploy --only hosting
    This will deploy the website at a URL like https://<FIREBASE_APP_NAME>.web.app.

How to test the example

  1. On the device where you want to receive push notifications, go to https://<FIREBASE_APP_NAME>.web.app and click the Request token button. Select to allow push notifications if prompted.
  2. Switch to a different tab with another site (this is so that a notification will trigger when you get a new message).
  3. Add a new message to the TalkJS sample_conversation conversation from the other user, sample_user_alice. A simple way to do this is to go to the Chat UI tab of the TalkJS dashboard and add a message from the Preview chat UI.
  4. You should now receive a push notification to your device with the message text.