Push Notifications in PWA Using Firebase and React

In this post, we figure out how to push alerts to the users of PWAs (Progressive Web App) using Google Firebase and React

Many sites send notifications to their users through the browser for various events occurring within the web app. We can easily do this using Cloud Messaging, which allows us to send messages to any device using HTTP requests with Firebase.

Here are the basic steps required for pushing the notifications to a web app using Firebase.

Setup

Firstly, it’s necessary to have a Firebase account. Once you have an account, go to the ‘Create a Project’ section.

For this demo, we are creating the project using the create-react-app command.

In addition to this, we need the Firebase library. For that, open your terminal and run the command npm install firebase –save.

Coding

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

In the above image, the function named initializeFirebase() has been called.

Service Worker:A service worker is used as a script that the browser runs in the background, separate from the web app. It is mainly providing data in the form of local storage cache. Even if we refresh the web page, the locally stored cache doesn’t change.

In the above image, we are importing a service worker (serviceWorker) into the index.js file, where other packages are also imported. Now, after importing it into the index.js file, let’s get that exported by developing a new file called serviceWorker.js, which is served as a service.

In the register function, the default is used so that user can use any name they want to enter in index.js while importing as a user. For example, we can use** “import swore**(or any other name) from. /serviceWorker;” instead of “import serviceWorker from. /serviceWorker;”

If (navigator. serviceWorker. Controller) {} =>This is the point from which the updated pre-cached content has been fetched, but the previous service worker will still serve the older content until all the client’s tabs are closed. New content is available and will be used when all tabs for this page are closed.

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

Service Worker:A service worker is used as a script that the browser runs in the background, separate from the web app. It is mainly providing data in the form of local storage cache. Even if we refresh the web page, the locally stored cache doesn’t change.

Note: You can also check the generated token in the developer mode=>Application=>LocalStorage=>requestedURL=>notification-token. Now, here you get your desired generated token. The value of notification-token(key) is the example of a generated token.

Now, after generating the token we need to call the function. Here, we call it in index.js file wherever we need to generate the token, or you can also call this function on click of a button.

Service Worker:A service worker is used as a script that the browser runs in the background, separate from the web app. It is mainly providing data in the form of local storage cache. Even if we refresh the web page, the locally stored cache doesn’t change.

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

Let’s create a file inside the project directory named push-notification.js. Now we must create a function that initializes Firebase and has the important keys to our project.

This key is the server key which you can find in your Firebase account:

Login to your Firebase account.
Go to the project settings through project Overview settings icon.
Then go to the Cloud Messaging and there you can easily get the server key for your Firebase account.

Here, you just click to send our request to Postman and everything is good to go.

Note: Remember that notification will only appear when your app is in the background or minimized.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

#reactjs #web-development #firebase #pwa #mobile-apps