UI Development

Adding Push Notifications to the Web App

A push notification is nothing but a message that pops up on the user’s device.

Notifications can be triggered by an open application, or they also can be “pushed” from the server to the user even when the application is turned off.

Push Notifications are Combination of two APIs: the Push API and the Notifications API. The Push API will allow the Service Worker API to handle Push Notifications from a server, even when the app is turned off. The Notifications API provides notifications on the user screen. The Service Worker API responds to the push notification events in the background and reinforces them to your application.

Push notifications can do simple things, such as alert the user when there is an important event, display an app icon and a small piece of text that the user can then click to open the app.


We must make sure that the browser needs to support Push API and Service Workers. Almost all of the browsers support Service Worker and Push APIExcept  safari which has some custom implementations).

The steps for creating a push notification:

  1. By using method ask permission from Notification APIs.
  2. If use service workers to subscribe to a Push Service using Push API. After that, Service Worker listens for push events. Then, the service worker alerts and sends information from the push message to show a notification using notification API.
  3. If permission is denied, we must make sure that we handle this case in code as well.

Step 1: Service Worker Registration

Push Notifications API will need Service Workers to handle push messages, so we need to register service workers. Then, the web application will send a request to the browser to register the Service Worker and further browser replies with ServiceWorkerRegistration object only if the Service Worker was registered successfully.


if ((“serviceworker” in navigator) && (“PushManager” in window)) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
    //state initializing
}) .catch(function() {
    //handle error
} else {
    //handle error


Step 2: Subscription

Here we have to handle subscriptions for Web Push Notifications. Then we have to ask the user whether he wants to receive Push Notifications from our application, if he/she agrees, then subscribe. If the user denies or blocks the request, then the browser will not will not allow us to ask the question again. The only way to unblock an application is to change the browser settings. But no user does this. So, we need to explain to the user what kind of Notifications he will receive and reason. We can also offer the user to subscribe by custom in-page message, and once the user this, then show him a browser request the system. Then, the web application sends this push subscription object to the application server with the help of an Ajax call.

When the service worker is ready, then can be subscribed by using Service Worker registration object and call ) this will be resolved with a subscription object. The subscription object will contain all the necessary information for sending push notification to the user. Now, we have to save application. A standard Ajax call is created to the server, we can send this object as a JSON or a string and then the application server needs to save this object into the database.

Step 3: Push Message

This step involves sending Push messages when something urgent and relevant or when TLDR“Too Long; Didn’t Read.”). The push server receives a push message the web application. When the browser is online the Push server forwards this message to the browser The message is sent to the browser when browser wakes up the Service Worker associated with the push subscription. Notification to the user is shown and the Service Worker handles this message.

Then by using the push server URL and user identifier from the endpoint received from the web application, application server requests the delivery of a push message by sending an HTTP POST request to the push server. The body of the request includes the content of the encrypted push message. HTTPS protocol must be used in this type of request because this HTTPS  protocol provides confidentiality and integrity protection from all types of external parties used for subscriptions and push messages.

When a request is received by the Push Server, it replies with a response stating that the push message was accepted and queues the message. The push message which is received gets added to the queue until the browser becomes active/online and the push server delivers the push message.


Message Encryption

Push messages may or may not include any data at all. If there is no data at all, the POST request body will be empty, and hence the service worker needs to fetch some necessary data before the user receives a notification from the server. Otherwise the application server can send some data which is called a payload along with the push message, so making the extra request can be avoided by the service worker. The most important point is that all the payload data must be encrypted. HTTPS protocol provides secure communication between the application server and the browser.

Handling the Push Message

The push message is sent by the application server to the user, the Push Server validates it and forwards this push message to the browser. When Browser wakes up, the Service Worker sends a push event to it. Then the Service Worker handles this event and processes the push message.


self.addEventListener('push', function(event) {
    var data = event.data.json();
    event.waitUntil(self.registration.showNotification(data.title, {
        body: data.body,
        icon: data.icon,
        tag: data.tag


Handling the Notification Click

The needs to be handled by Service Worker. Close a notification and open a window / tab to a specific URL is one of the most common responses. This can be done with of clients) API.


self.addEventListener('notificationclick', function(event) {
    event.waitUntil(clients.openWindow('/* link url */'));


We have to handle this notification when the user any action button or notification itself, but clicks the close button.Notification Close


self.addEventListener('notificationclose', function(event) {
    //do something


Step 4: Unsubscription

Web Push Notifications happens when the user does not want to receive any Web Push Notifications from your process is very much similar to the subscription process. When a web application asks the browser to unsubscribe the user from receiving any Web Push Notifications. Then, the browser sends a push subscription remove request to the Push Server. a confirmation from  the Push Server replies and the web application sends the confirmation to the application server. Finally, the application server removes the subscription record from the database or other storage.


registration.pushManager.getSubscription().then(function(subscription) {
    if (subscription) {
        return subscription.unsubscribe().then(function(successful) {
        }).catch(function(e) {
            //error handling
}).catch(function(error) {
    //error handling


Subscription Expiration

Subscription expiration happens when the subscription gets a user is offline for a long time, or the server gets overloaded.Subscription Expiration


self.addEventListener('pushsubscriptionchange', function(registration, newSubscription, oldSubscription) {



Web Push Notification technology helps to make web applications better in general and  allows communication with users in a more efficient way and engages users by providing urgent and relevant notifications. So, it is ready to be used widely.

About The Author