BASIC INTEGRATION OF FIREBASE PUSH NOTIFICATIONS TO REACT-JS

12-02-2019    Hari Kondlapudi    Views 47

Push notifications are one of the effective ways to always be connected to your favorite or frequently used Applications for any in app updates and similarly for the Application providers to connect with their clients. 

Google’s Firebase is one such push service provider, which we will use further in this article. 

First, register your app in the firebase console to get your firebase config object. 

Help Links: 

Setup Instructions : (https://firebase.google.com/docs/web/setup), 
Console : (https://console.firebase.google.com/)

Add a manifest.json file in your public folder add gcm sender id which is unique and the same for all projects as shown below.
{
"gcm_sender_id":103953800507
}

and link its reference in the index.html file as shown.

< !DOCTYPE HTML >
< html lang="en" >
< head >
< meta charset="utf-8" >
< meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
< link rel="manifest" href="%PUBLIC_URL%/manifest.json" >
< /head >

Now we have to add a service worker (firebase-messaging-sw.js) file in Public folder to handle notifications when in background as below. Before that install the firebase module.

npm install --save firebase

//public/firebase-messaging-sw.js
import * as firebase from "firebase/app";
import 'firebase/messaging';
const firebaseConfig = {
   apiKey="API_KEY",
   authDomain: "PROJECT_ID.firebaseapp.com", 
   databaseURL: "https://PROJECT_ID.firebaseio.com",
   projectId: "PROJECT_ID",
   storageBucket: "PROJECT_ID.appspot.com",
   messagingSenderId: "SENDER_ID",
   appId: "APP_ID",
   measurementId: "G-MEASUREMENT_ID"
};
//Initialize Firebase
firebase.initializeApp(firebaseConfig);
if (firebase.messaging.isSupported()) {
   const messaging = firebase.messaging();
   messaging.setBackgroundMessageHandler(function (payload) {
   return self.registration.showNotification(payload.title, payload.body, payload.data);
});
}

Based on your requirements you can handle receiving messages either in your App.jsx or any other screen by sending your Firebase token to your apps server. Below is the implementation for requesting browser permission to show notifications and get unique tokens.

initializeFirebase=async()=>{
         //Initialize Firebase
         if(!firebase.apps.length){
                 firebase.initializeApp(firebaseConfig);
         }
          if(firebase.messaging.isSupported()){
                     let messaging=firebase.messaging();
                     messaging.requestPermission()
          .then(()=>{
                return messaging.getToken()
           })
           .then(async(token)=>{
                 console.log('token', token)
            })
            .catch(err=>{
                     console.log(err)
             })
            messaging.onMessage((payload)=>{
                        console.log('onMessage', payload)
               })
            })
         }

This is the basic implementation of Firebase push notifications from the front-end side for a React JS Project.

Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 376
block-chain-transform-your-business

BLOCKCHAIN TO TRANSFORM YOUR BUSINESS

Hari Kondlapudi        Views 345
block-chain-transform-your-business

LOCALIZATION WITH REACT

Hari Kondlapudi        Views 69

Contact Us

Address:

Do Systems Inc,
433 Plaza Real, Suite 275
Boca Raton, FL 33432 

Email: sales@dosystems.com
 
Copyright © Do Systems Inc. All rights reserved.