Get. Set. Go! To reach today’s milestone, you will need to take 3000 additional steps

Weekend Sale is Here! Get 25% off your order when you fill it up

08:09:24! Offer ends midnight

These are just a few of the push notifications that each of us receives on mobile phones. These notifications are insightful, funny, and informative at best. They entice us to open the app and check out the latest products. These timely messages, also known as Push Notifications, are a great way for business owners to increase their viewership, drive traffic and monetize.
Publishers and app owners use this tool for making impressions on users. They engage and build customer relationships to generate high revenue.
Let’s take a look at the technology used to create these automated messages.
TABLE OF CONTENTS
1. Introduction to Web Push Notifications2. Service Worker API3. NodeJS Server 4. Generate VAPID keys5. Configuring Subscribe Route6. Creating the Client Side7. Test the Server8. Conclusion9. CloudThat 10. FAQs
Introduction to Web Push Notifications
Web Push Notifications are messages sent to users to draw their attention on the activities occurring in web applications.
This blog will show you how to send push notifications via NodeJS applications using service workers.
API Service Worker
As proxy servers, service workers connect web applications, browsers, to the network. They can create offline experiences, intercept network requests, take action based upon whether the network is available, and update assets on the server. They can also be used to support background sync APIs and push notifications.
Setting up NodeJS Server
We will create a server with ExpressJS and NodeJS. We will now install express in our application.
I will use VS Code Editor in this application. You can choose between Code Editor or IDE.
Step 1: Create a project directory. Open the terminal and navigate to the project directory. Give the command npminit -y to your terminal. It will generate a boilerplate to our NodeJS app.
Step 2: Next we will install Express.JS by using our application’s command npm i Express.
Step 3: Next, we will install nodemon. This restarts the NodeJS Server whenever there is a code change. Nodemon detects any changes and restarts your server for you. Write npm i-g nodemon in the terminal
Step 4: Next, we will install web-push which triggers the message pushing from the backend via Web Push protocol. n terminal write web-push
Our package.json looks something like this.

Step 5: Now we will create a basic ExpressJS server to run our application on port 33000. Create a file index.js in the root directory

Generate VAPID keys
This section will explain what the VAPID key means and how to create it for your application.
The Developer can send push notifications to the user using the VAPID keys (Voluntary Application Server ID) keys. They can also be used to identify the user sending the push notifications.
Use the command to generate VAPID keys for your terminal

It will generate two VAPID keys, one public and one private.

Note: VAPID keys may be different for different users.
Use VAPID keys with Web Push
We will store the keys in variables in the index.js file and call the setVapidDetails function of the web-push module.

Set up Subscribe Route
Now, we will create a subscribe route for our client to send the POST requests. It will send notifications the service worker.

So, now our web push server has been completed.
Now, we will create the client side of the application form. Here we will POST the request to the server.
Creating the Client Side
In the root folder, we will create a client director. This folder will contain the following: