Integration of firebase push notifications to Reactjs

12-02-2019    Hari Kondlapudi    Views 1350

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 : (, 
Console : (

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.

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

< 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

import * as firebase from "firebase/app";
import 'firebase/messaging';
const firebaseConfig = {
   authDomain: "", 
   databaseURL: "",
   projectId: "PROJECT_ID",
   storageBucket: "",
   messagingSenderId: "SENDER_ID",
   appId: "APP_ID",
   measurementId: "G-MEASUREMENT_ID"
//Initialize Firebase
if (firebase.messaging.isSupported()) {
   const messaging = firebase.messaging();
   messaging.setBackgroundMessageHandler(function (payload) {
   return self.registration.showNotification(payload.title, payload.body,;

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.

         //Initialize Firebase
                     let messaging=firebase.messaging();
                return messaging.getToken()
                 console.log('token', token)
                        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


Add Comments

Submit Comments

More Blogs

What is Trade Finance Transaction?

Blockchain Technology In Trade Finance Transactions

Hari Kondlapudi        Views 3044

Blockchain to transform your business

Hari Kondlapudi        Views 2449

Localization with React

Hari Kondlapudi        Views 1601

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



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