FCM Configuration

The steps you need to follow to register with Firebase Cloud Messenger are explained below:

Create a new project

To create a project, perform the following steps:

1. Sign into Firebase console using your Gmail ID.

2. Click Add Project, enter the project name , click on continue

3. Click on Continue in Step 2

4. In Step 3, select default account and click on Create Project

5. Click on Continue

6. Add Firebase to your web app & click on Web

7. Enter web app name ,click on Register app

8. In Step 2, you will get API key, sender id, Project ID & App ID, Click on Continue to console

9. Click on Project setting under Project Overview, to get the Auth key

10. Click Cloud Messaging and enable Cloud Messaging API (Legacy) by clicking on the three dots
    " ⋮ " next to it in order to get your Server key [It is Authorization Key for CEE]

11. Once the above details are with you, you can go back CEE Platform to continue with your Integration. Click here for following the steps of the same.

ADD sw.js File

Once FCM credentials have been added and saved, CEE panel generates sw.js (Service worker JS) which needs to be added in the root directory of your website.

How to get Sw.js file:

To get the sw.js file, PFB, The path
Go to your CEE Platform --> Assets --> Web --> Websites --> Get JavaScript SDK --> Download Zip

Once Zip file is downloaded, rename the file to sw.js and put the same in the Root directory of your website.

Once the above steps are complete, you are ready to go LIVE for Browser notification on Firefox and Chrome.

Validating sw.js Integration

Verifying Service Worker

Once you copy-paste the codes as shown in the previous step and also added the service worker file to your website root, follow these simple steps to verify the process of integration:

1. Open your website in Chrome browser and open Developer Tools from the browser menu or by pressing keyboard shortcut key F12.
2. A panel (Dev Tools) will appear in your browser window.
3. Under this Dev Tools panel, switch to ‘Application’ tab and click on Service Worker from the list of Applications available on the left.
4. Above step shows sw.js as a source here.

Right-click on sw.js and click on ‘Open in New Tab’. This will open the service worker file in a new tab showing the code with-in it.

📘

1. Once done with the above steps, if you want, you can now head over to the Web Push Section, to get started with running Web Push Messages.

2. In case of any queries, please contact [email protected]