Integration of firebase push notifications to Reactjs

12-02-2019    Hari Kondlapudi    Views 1191



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.





Subscribe to Email Updates

Subscribe


Add Comments

Submit Comments

More Blogs


What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

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

Blockchain to transform your business

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

Localization with React

Hari Kondlapudi        Views 1335

Contact Us

US Address:

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


India Address:

Jayeesha Software Pvt Ltd
Hitech City Rd, VIP Hills,
Silicon Valley, Madhapur,
Hyderabad, TS 500081


Email: sales@dosystemsinc.com
 

Navigation

Copyright © 2023 Do Systems Inc. All rights reserved. Privacy Policy