Before we dive into building a push notification system, it’s advisable that you have some basic knowledge of node.js and a little bit of service works. For service workers, there are quite difficult to grasp if you’re just getting started with them, there are basically the core of progress web apps (PWA), here is a friendly introduction to service workers on the Medium website.
We’re going to build this notification system using a nodejs module called web-push. For those who had used push notification before using services like Pusher or PubNub, this web-push module allows us to thesame thing without using those third party services.
What is a push notification?
A Push notifications is like SMS text messages and mobile alerts, but they only reach users who visited the website. Most browsers has support for push notifications. If a user visit your site on a browser that doesn’t support push notifications it does no harm, the user just wouldn’t see the notification and that’s it.
Let’s get started!
You need to have node.js installed on your machine.
Installing the dependencies
Next we want to install the dependencies, we need web-push, express & body-parser
In your package.json file, change the script from this
Noticed that I used index.js as my entry file, but you can use what ever name you like as your entry JS file.
Requiring the modules
Create a js file in the root directory name it (the same name you used in the package.json file). Now go into the js file you just created and require all the modules we installed.
We want to create a set of vapid keys, but first you’ll need to specify the location in your terminal. Make sure you’re in the root directory of the project you’re working. run this command
After that, you should see two keys generated in the terminal (Public key: …….) & (Private key: …….). DONT CLOSE THE TERMINAL YET.
In your js file create two variables call one publicVapidKey and the other privateVapidKey. In your terminal, copy the generated keys from the Public & Private key and paste them in their specific variables. Like this
Setting the body-parser & the static path
At the bottom of where we initialized express() place this code.
What the vapidkeys does is basicaly identifying who’s sending the push notification.
This is resposnsible for sending the notification to the service workers
Creating the server
In your root directory create a folder, name it “client” remember when we set the express.static we used client as the folder name. so make sure you name the folder the same name you used in the path module.
In that client folder create a client.js, worker.js and index.html file.
The index.html page is the page you want the push notification to show on. For sake of this tutorial we’re going to put a h1 tag inside the index.html page.
We actually want that Public key inside the client.js, so copy the publicVapidKey variable you created in the previous js file and paste it in the client.js file. Like this
Check for service worker
We are going to check to see if we are able to use service worker in the current browser. Note that we’re now working in the client.js file.
We are going to register the service worker, the push notification and send the push notification. - Outside the if() statement
Converting the URL safe base54 string to a Unit8Array
Outside of the async send() function
We are done with our client.js, now we procceed to the worker.js
Handling the push event
Now you can view your app by running npm start