Firebase Cloud Messaging (FCM) integration on your web apps

image

FCM is a cross-platform messaging solution that lets you reliably deliver messages at no cost.

For our PWA we used FCM JavaScript API which lets you receive notification messages in web apps running in browsers that provide service worker support. This includes the following browsers:
Chrome: 50+
Firefox: 44+
Opera Mobile: 37+

Steps to integrate FCM are -
1. Create a Firebase project using Firebase console [https://console.firebase.google.com/]
2. Add the Firebase SDK
3. A short snippet of initialization code that has a few details about your project.

Code snippets:
----------------------
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-messaging.js"></script>

<script>
   var config = {
   apiKey: "<>",
   projectId: "<>",
   messagingSenderId: "<>"
   };
   firebase.initializeApp(config);
   requestTokenPermission(); //Get the permission from the user
</script>

<script>
const messaging = firebase.messaging();
function requestTokenPermission() {
messaging.requestPermission()
        .then(function() {
            fetchToken(); //Fetch the FCM token details and store it in your database
        })
        .catch(function(err) {
            if (err.code == "messaging/permission-blocked") {
        userPermissionBlocked(); //Update the status at the backend accordingly
        }
        });
</script>

FCM client SDK will store the generated FCM key details at the client end for receiving messages from the FCM server. In case if the user is clearing their mobile cache using the browser option or by using any apps like "clean master" then we can't able to reach out those users through FCM messages. Also the token could be rotated by FCM after initial setup at any point in time (there is no defined time frame for this). To handle such scenarios we need to check the client cache for the FCM key details. In case if its not there then we need to regenerate the FCM key using the getToken() function.

Also FCM SDK will trigger the event onTokenRefreshcallback() whenever a new token is generated, so calling getToken() in its context ensures that you are accessing a current, available registration token. After you've obtained the token, send it to your app server and store it using your preferred method.

An FCM implementation includes two main components for sending and receiving messages:
1. A trusted environment such as Cloud Functions for Firebase or an app server on which to build, target and send messages.
2. An iOS, Android, or Web (JavaScript) client app that receives messages.

Finally we need to add a web app manifest that specifies the gcm_sender_id, a hard-coded value indicating that FCM is authorized to send messages to this app. If your app already has a manifest.json configuration file, make sure to add the browser sender ID

{
  "//": "Some browsers will use this to enable push notifications.",
  "gcm_sender_id": "<>",
  "gcm_user_visible_only": true
}

To retrieve the messaging object from FCM server use the method -
const messaging = firebase.messaging();

To test the FCM integration on our web app we can use the curl command to send the msg from the command line :
curl -X POST --header "Authorization: key=<>" \
    --Header "Content-Type: application/json" \
    https://fcm.googleapis.com/fcm/send \
    -d "{\"to\":\"<>\",\"notification\":{\"body\":\"<>\"}"

References:

https://firebase.google.com/docs/web/setup
https://firebase.google.com/docs/cloud-messaging/
https://javebratt.com/ionic-push-notification/