Web Push Notifications
Web push notifications are messages that come from a website. You get them on your desktop or device even when the concerned web page is not open in your browser. They allow users to opt-in for timely updates from web apps that aim to re-engage their user base with content that might be interesting, important and well-timed for the users.
Push is based on Service Workers,the reason being they operate in the background. This is great for Push Notifications because it means that their code is being executed only when a user interacts with the notification itself.
Push & notification
Push and notification are two different APIs.
Push API — to push notification to the client from the server via the push service API of the browser.
Notification API — to display notifications.
This diagram gives an overview -
The web page interacts with the service worker which receives push events from the user agents(browsers), on the back end messages are sent from the application server to correct client through the push service.
Notification API
Before we can send notifications, we need the permission from the user. This code will prompt the user for permission to show notifications.
Permission is requested automatically on subscribing to the push service. Hence, this code is not required when using only push notifications.
Let’s check out some examples for configuring and displaying notifications using service workers.
This code first checks whether permission has been granted and if so it calls the showNotification method on the service worker registration object passing in the notification title.
For push notifications, you call “showNotifications” in the service worker in response to a push event when a message arrives. We can specify an optional options object to configure the notification, which is passed in the showNotifications as the second parameter.
The body property is the body text displayed below the title. Icon is the image displayed at the top of the notification. Vibrate is the vibration pattern for phones, in this case, it is 100ms on, then 50ms off, 100ms on and this continues. Data is the arbitrary data we can retrieve from the service in the service worker when the user interacts with the notification. The primary key helps identify which notification was clicked when handling the interaction in the service worker.
Action buttons can also be added and each event would have to be handled in a different way.
The above snippet would create something like this.
Some of the notification events you can listen for in a service worker are -
- notificationclose — This is triggered whenever the notification is dismissed by direct action.
- notificationclick — If the user clicks the notification or action buttons on it, this event is triggered. If an action button was clicked, then the action is attached to the event object of the notification click handler.
Different browsers display notifications differently and some of them do not even display. So a default behavior is added using the else block.
Sending and Receiving Push Notifications
Browsers handle push notifications using their own push service system. When the user grants permission for the notifications, you subscribe the users to the browser’s push service. This in turn creates a subscription object that includes a public key to enable messages to be encrypted and an endpoint URL for the browser’s push service which is unique for each user.
From your server send the push messages to URL encrypted with the public key and hence it sends the message to the right client which is handled by the service worker.
In the app’s JavaScript call PushManager.Subscribe() on the service worker registration object. Get the subscription object and convert it to JSON. Then get the endpoint URL, public key and save this to your server.
Summarizing this part -
How to subscribe to the push service?
- Register the service worker from the main page, main.js. This request goes to the user agent. The user agent returns a service worker registration object. Use this object to access the push manager API and from that request to subscribe to the service. Thus, a request is passed on to the pushed service. The push service returns the subscription object which includes the endpoint URL and the public key. Save the subscription object data to your server.
- Before sending the push notifications, we need to register for push service which can be done as shown.
Each subscription is unique to the service worker. The endpoint URL needs to be kept as a secret otherwise other applications might be able to push messages.
Below is an example of the subscription object -
The subscription object consists of 2 parts — the endpoint URL, keys property.
The p256dh key is the public key for message encryption. The auth key is an authentication secret.Hence these keys are used by the application server for authentication.
How to send a push message from the server?
A backend service on your server sends a push message to the push service using the endpoint URL from the subscription object. The message must be encrypted with the public key. The push service uses subscription Ids encoded in the endpoint URL to send the message to the right user. The push event is picked by the service worker. The service worker gets the data from the message and displays a notification.
It is essential to ensure that there is secure communication between the user and the server and between the server and the push service and also between the push service and the user.
Voluntary Application Server Identification(VAPID) was created for this purpose. VAPID uses JSON Web tokens to carry identifying information.
Hope, I have been able to cover the major aspects of web push notifications. Thank you!
