January 4, 2021

Push Notification

Implementing Push Notifications with React.js and Node.js

redux thunk versus redus saga

For any application, engaging the users and thereby driving the user adoption is a key and tough ask! This is where Push notifications wield their magic wand. Not only push notifications are a great marketing tool for user engagement, they also help you to update your audience in real time. In this blog, we are going to implement Push Notifications for our web application using React.js and Node.js.

Benefits of Push Notifications

The next pertinent question is, why would you want to implement Push Notifications? Here are some benefits:

  • User Engagement and Retention
  • Increased Traffic
  • Behavioral Targeting
  • Enhancing user experience and much more
Redux-image

Image: Push Notifications vs Email

Time to bring out your weapon💻 with some ☕. Before starting, make sure you are having node.js installed on your system. If you do not have node.js, go to https://nodejs.org/en/ and download as per your system configuration.

Redux-image

Steps to set up the Node Server

The next pertinent question is, why would you want to implement Push Notifications? Here are some benefits

  • To implement push notifications, we will be using a package called web-push.
  • Let us quickly set up a new node project and install the dependencies.
  • Open your terminal/command-prompt and type npm init -y
  • This will create a new node project
  • Let us now install the required dependencies using npm install express web-push
  • Generate your own public and private vapid keys. To do so, open node_modules/.bin/web-push in terminal or command-prompt and type web-push generate vapid keys
    • Vapid (Voluntary Application Server Identification) is a public/private key pair
    • Public key is used to uniquely find the server so that user can subscribefor notifications from that server
    • Private key is a secret that is used by the server to encrypt thenotifications before sending them to the user.
  • Create a new file called index.js in the root directory and add the following code:
  • Redux-image
  • Start your server using npm start. We are now done with our server setup. Let us now start with our React application.

Steps to implement React Application

  • Open your terminal/command-prompt and install ‘create-react-app cli‘ globally using command -> npm install create-react-app –g.
  • Let us now create a new react project using command create-react-app push-notification and this will create your boilerplate code automatically
  • Move into the created directory with cd push-notification
  • You can run the app using command npm start and that will open your application inside the web browser
  • Let us now start writing some code. Open push-notification directory inside any code editor of your choice and you will see a bunch of code already there which was created by create-react-app command.
  • Redux-image
  • To begin with, replace the line serviceWorker.unregister() with serviceWorker.register() in src/index.js
  • Redux-image
  • By doing so, we are saying that we want to make use of something called as service workers
    • Service Workers are the scripts that execute as a background process on a different thread to the browser’s main thread
    • Service workers are used to implement PWA (Progressive Web App) features such as Push-Notifications, Caching, background synchronization etc.
  • Let us now create a custom service worker file in the public folder and name it custom-sw.js
  • You will also see a file called serviceWorker.js in the root directory which was created by default using create-react-app command
  • Open that file and you will see a bunch of code already there. Modify swUrl as given below:
  • Redux-image
  • You may have noticed that there was already a service-worker.js in swUrl. Yes, create-react-app already comes with a default service worker which is used only at the build time to cache our static assets
  • If you want to customize the serice worker logic, then we need to write our separate service worker implementation. That is exactly we need to do in our case
  • Now it is the time to write our code in custom-sw.js file. Open the file and add the following code.
  • Redux-image
  • In the above code, we are installing our service worker in the background and listening for a push event which will be pushed by our server at some point of time
  • If you want to execute some code when user presses or closes the notification. That can be done by adding following in custom-sw.js file:
  • Redux-image
  • Open your App.js file and add the following code:
  • Redux-image
  • Run your app again using npm start
  • Click on Subscribe for Notifications button
  • Check your log. Subscription object will look something like this:
  • Redux-image
  • For this code to work properly, use this same subscription object in your node server index.js file

And, we are done. I know that was long. Wait what, you did not receive any notification? 😳

Because we did not send any yet😐. To test our notification, we will use Postman.

Redux-image

Hit the endpoint and we will get the notification😀

Redux-image

This is how we can implement Push Notifications in React.js and Node.js. Go ahead and implement this feature in your apps right away.

A small note -> A small note -> To check if your browser supports the push api, go to https://caniuse.com/#feat=push-api

Bonus tip -> You can implement the push notifications with the same web-push package in Angular. Node server implementation will be the same. You just need to handle the client logic in Angular.


Written by Abhijeet Khire, System Executive at Eternus Solutions

Leave a Reply

Your email address will not be published. Required fields are marked *

one × 1 =

Share This Blog

Blog Archives

Subscribe to our Newsletter