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:
- Sign into Firebase console using your Gmail ID.
- Click Add Project, enter the project name, enter your Country/Region and proceed by ticking the Checkboxes and clicking Create Project.
- In the Dashboard, click Project Overview, and then click on Project Settings.
The important parameters required for Browser Push Notification are API Key, Authorisation Key/Legacy server Key and Sender ID.
- Copy the Web API Key provided under General.
- Click Cloud Messaging to get your Legacy server Key [It is Authorisation Key for Smartech] and Sender ID as Highlighted.
Kindly Note: If the Legacy server key is not available kindly use Server Key.
Once the above details are with you, you can go back Smartech Platform to continue with your Integration. Click here for following the steps of the same.
Once FCM credentials have been added and saved, Smartech 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
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:
- Open your website in Chrome browser and open Developer Tools from the browser menu or by pressing keyboard shortcut key F12.
- A panel (Dev Tools) will appear in your browser window.
- Under this Dev Tools panel, switch to ‘Application’ tab and click on Service Worker from the list of Applications available on the left.
- 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.
Updated 5 months ago