Notifications are an important part of good user experience. You can keep your users updated about your product and offers by using notification properly .Today we will see how we can receive notification in our ReactJS web application. I assume you already have a basic react application to follow along. We will use firebase for the notification part.

STEP 1 : Install Firebase Dependency

You should install required dependencies

yarn add firebase

Now go to your firebase console -> create a project -> grab your firebase projects configuration details . You can learn more from here

STEP 2: Add Service Worker to Project

To receive notification we need to have a service worker in our application .

A _service worker_ is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

As we want to receive notification without any user interaction we need to have a Service Worker . To create one . . .

• Go inside your public folder (the folder with index.html file in it)
• Create a new file named firebase-messaging-sw.js
• Add the following code and replace the value of config object with your configuration values

#firebase #notifications #javascript #react