PWA — Web Push Notifications Overview & Implementation
Progressive Web Apps (PWAs) leverage Google methodology to deliver an extremely engaging mobile experience through web.
Progressive web application is a new software development methodology which combines features offered by most modern browsers with the benefits of mobile experience.
To get more details on PWA you can refer this. In this article, we will be talking about “Adding Push Notifications to a Web App”.
How can you get in touch with users without having them to revisit your website ? To build engagement with your users you can implement push notifications into your web applications. Web Push notifications were first introduced by Chrome in early 2015 in version 42.
What is Push Notification ?
A notification is a message that pops on the user’s device which can be triggered locally by an application or can be ‘pushed’ from the server even when that application is currently not running or active.
Web Push Notifications are same as which we can see on mobile via native apps, only difference is messages come from a mobile/desktop web.
Web Push Notifications makes use of two API’s:
- Notification API: To display pop-up notifications
- Push API: To handle messages that are pushed to your client from your server via the ‘push service’ used by the browser.
Push Service is a system for routing push messages from a server to a client. Each browser implements its own push service.
Service Worker
Web push notifications build on web push standards and service workers. It means your site needs to work on https & you need to set up service worker on that page & register handlers for it.
A service worker is a script that your browser runs in the background, separate from a web page, intercepting network requests, caching or retrieving resources from the cache, background sync, and delivering push messages.
To get more details on service workers you can refer this.
Push Notification Overview
- Let’s say we have one backend server here i.e. App Server. Now we send a message to an intermidiate push service which is a generic push service for web. Then this push service talks to an individual gateways by the manufacturer, well it knows how to do routing.
- That goes ahead and sends the messsage across to the target operating system/device. Then the OS wakes up the service worker & delivers the message.
- The service worker puts up the notification. And then when user interacts with the notification, service worker gets that interaction & may in fact wake up our application.
- A push message will wake up the service worker, & it can bring the app up to the front, if the service worker triggers a URL.
This is a high-level overview, now let’s understand how application receives messages from server.
Process of sending and receiving a push message
Subscribing Users i.e Request Permission:
Web app first takes the permission from user to subscribe to push notifications. When user says yes, it gives back a subscription ID which we’re going to use to send the notification to the user. And we save that in our server by sending it. In that way we can get to that user later.
Sending Messages:
Now sending message to a server for particular user, we generate a message & send it to the end-point & then it sends to the browser.
Receiving & Displaying Messages:
In the browser, when message comes in i.e. when browser gets the message, it spins up the service worker. Service worker handles the message using getRegisteration() & on the registration it will call the showNotification() to display notification.
I hope you get some idea about what and how push notifications works.
Let’s see how to implement it in web application by creating sample example.
Implementation
I am using Linux OS and using basic linux commands on terminal/console.
For windows users, commands can be different.
Let’s create a simple web page with one ‘Subscribe to Push Notifications’ button on it. Click on which we ask user about subscribe to push notifications & then from the server we’re gonna push out notification to it.
For creating a server, you need to be installed node.js.
- Create a new folder let’s say web-push-notifications, go to that folder and fire the command npm init -y to install dependencies using npm.
- Install the package web-push using npm i web-push
- Open that folder in any editor, create ‘index.html’ file to add a button, click on which we ask user to subscribe for notifications. First check if browser supports a service worker. So on page load we create a serviceworker’s instance and register it & it’s gonna be in a separate file let’s say ‘sw.js’.
- When user click on subscribe button, we need to send a request that we can receive notifications. So it will pop up the dialog & it does that by making a call to the ‘push manager’ which is on the service worker.
- We are passing a flag named ‘userVisibleOnly to’ the subscribe method. By setting this to true, the browser ensures that every incoming message has a matching (and visible) notification.
We have logged the push object here which containd end-pint, expiration time and keys. We will need that to send that to server (let’s say named ‘sub’ that we are going to use in server later). - Then we need an ‘application server key’ & this will be generated by web-push package, that gives us the glue between the client and server. This will be the public key on client. Also we have public and private keys on server (VAPID keys).
VAPID: Voluntary Application Server Identification for Web Push is a protocol that allows our application server to identify itself to the Push Service. It is a security measure that prevents an attacker from sending messages to an application’s users from another server.
- Let’s see how to generate these keys below. Create a file named push.js and generate vapid keys as below:
Run it on terminal using node <file-name> as below:
Now use that generated VAPID public & private keys and replace them in code. Then remove the key generation code as we don’t want regenerate them again and again. So push.js will be:
Here, sub object is push object that we have logged (in index.html) while sending request to push manager i.e we pull out from our database of stored people that want to receive a notification. At this point, keep it empty like sub = {};
Once we run the web app after deploying, we get the logged push object from browser’s console, we need to copied that and paste it in push.js.
- Let’s create and handle the push event in service worker (sw.js file).
Here options is the 2nd parameter in showNotifications method is the optional object to configure the notification.
- Now to run web page we will need to deploy it. So first I am pushing the web-push-notifications repo on github.
And deploying using Netlify, you may use other options. So deployed URL is: https://vigilant-johnson-46d851.netlify.com/ - Once you hit the deployed web page, you will see subscribe button, click on that & open a browser’s console, you will see the subscription object, that we need to copied and saved in push.js as mentioned earlier.
- Now go back to the terminal and do node push.js, server is up and ready to show web push notification as below :)
That’s it! Hope you get a glimpse of what the web push notifications are and how to use it !
I have also worked on small example of adding web push in Angular, you can refer the code from here. You can also check my another blog related to PWA: PWA — Add to home screen from different browsers.
If you have any queries, you can directly ask me via comments / email.
Here are some references for “Web Push Notifications”:
