Knowledge Base for Development

What is Web Push Notification, how it works and its benefits

What is Web Push Notification, how it works and its benefits

Do you know what the web push notification is? If you open a popular website, after some time, you will receive a notification, which says that if you want to know more about the new articles about this website, you will need to subscribe to that push notification. As technology is increasing, new ways are coming in the way so that more readers can know about your latest post. This helps your readers connect with you. Your traffic comes to you again

If you have been using the internet for a long time, you may already know about this web push notification. If we subscribe to that website or channel, we get information about new articles that are sent to your desktop, mobile, smartphone, tab or any electronic device.

Let me tell you if you have registered on any cricket website, you will get information about the latest score.

What is web push notification?

web push notification

Web push notifications are notifications that can be sent through the desktop web and mobile web to the user. These are alert type messages that slide on the top or lower right-hand corner of the desktop screen, depending on the operating system or any mobile device. Web push notifications are delivered on the user’s desktop or mobile screen at any time whether the user is on the website or not.

Push Notifications are assembled using two APIs, they are Notification API and Push API. The app displays system notification with the Notification API. With the help of Push API, the service worker is allowed to handle Push Messages from the server. It does not matter whether the app is active or not. Notification and Push API are built on the Service Worker API, which response to push messages in the background and relay the application.

History of Web Push Notifications

From the beginning to till now many such changes have been found in which you do not know about. So I have prepared a list of all of these so that you can easily find out about their history.

  1. Apple launched the first Apple Push Notification Service (APNs) in June 2009, the first push service.


  1. In April 2015, Chrome introduces Service Workers, which supports Web Push API with Chrome 422


  1. In December 2015, Chrome introduced the Custom Notification Buttons with Chrome 48.


  1. Firefox rolls out in January 2016 for web push support with Firefox 44 Desktop


  1. In May 2016 Microsoft Edge also released Support Work Workers


  1. In August 2016, Firefox extended the web push API support for mobile with Firefox 48


  1. Chrome introduced in February 2017 Rich Notifications with Chrome 56


  1. Introduced in April 2017, Native Chrome Desktop Push Notifications in Mac OS with Chrome 59

Web Push Notification Terms

Here I have mentioned some terms that we use often in Push Notification. You are easy to understand so I have provided some information about them.

    NotificationA message that is displayed to the user
    Push MessageA message that is sent from server to client
    Push NotificationA notification that has been created in response to a push message
    Notifications APIAn interface used to configure display notifications.
    Push APIAn interface that helps the app subscribe to the service worker to receive push service and push message
    Web PushAn informal term that is used to refer to the process and components that are involved in sending messages to server from client to web.
    Push ServiceA system used to routing push messages from the server to client. All browsers run their own push service.
    Web Push ProtocolThis explains how an application server or user agent interacts with a push service.

Web Push Notification vs App Push Notifications?

Native app notifications take full advantage of all the features of the device – like the camera, GPS, accelerometer, compass, contact list etc. That’s why web app notifications can not afford all these features.

Native app notifications are limited to mobile phones and tablets. Web push notifications also have more access to the desktop than mobile phones and tablets.

 Native app notifications support rich media such as – images, videos, gifs, audio, and other interactive elements. Web push notifications only support large images.

There are many things in this web push notifications message which I have explained in the following detail so that you can easily understand.

Title – All notifications require an eye-catching title. From which other viewers click on those headlines.

Description – A description is a short message that supports both your title and offer. In this, you have to squeeze all the information in the format of a small message so that you can convey your information to the people. But the point here to note is that the effectiveness of your message should not be reduced in this shortcut.

Website URL – This is the same website URL that you subscribe to get web push notifications.

Call to Action Buttons – These buttons are used to trigger different actions. Such as taking a user to the landing page you want, sending a social message (Tweet), triggering the Play Store or the Dialer etc.

Icon – Nowadays everyone is sending their notification, so the user does not know about correct and important notification. Therefore, if you can attach your logo to your notification, it will be very useful for users to recognize your notification.

Banner Image – Good images are needed to increase the importance of your text. Just as good title and text have the importance of good image, there is a great need too, because a good image allows users to click on your notifications.

How Web Push notification works

Here we will learn how this Web Push works. Then let’s know about it in detail.

All browsers manage their notifications manually, using their own system, which is also called “push service”. When user permits permission for the push, in your site then you can subscribe to the browser’s push service. This creates a special subscription object that contains the “endpoint URL” of the push service, and it is different for all browsers and its public key is also different. When you send a push messages to this URL that is encrypted with the public key, and the push service sends it to the right client. A typical subscription object looks like this:

“keys”: {

How does a push service know which message to send to a client? Let me tell you here that the endpoint URL contains a unique identifier. And the same identifier is used to route the message and which sends it to the right device when it is processed in the browser then it is known that which service worker will handle that request.

This identifier is opaque. As a developer, you can not remove any personal data from it. And it is not too stable, so it can not be used to track users.

We can use Push Notifications only in HTTPS because these push notifications are connected with the worker. This tells us that the communication channel that is on the server and push service that is between the push service and the user is absolutely secure.

But here’s the point of thinking that only HTTPS does not ensure that your push service is completely secure. We will also have to pay attention that whatever data is sent from server to client, in the meantime it is not being directly or another indirectly triggered by a third party. You have to take special care of it. With this, you should also encrypt message payload in your server, so that your data will be even more secure.

I have explained the entire process in the shortcut, in the process of sending and receiving a push message, after which, to display the push notification.

On the client:

1. subscribe to Push service
2. Send Subscription object to server

On the server:

1. Generate the data that you want to send to the user
2. Encrypting data with the help of the user public key
3. Send the data to endpoint URL in which the payload of encrypted data is attached.
The message here is routed to the user’s device. This makes the browser wake-up, and finds the correct service worker and invokes the “push” event.

On the client:

1. Receive whatever message data is received (if anything) in the “push” event
2. After that performs some custom logic push event
3. And finally shows the notification
Along with this, the server push from the user notification to the end is complete.

Best Practices for Good web Push Notification

Notification is a very important thing, that is why we can not take it lightly. So let us know again that we should pay more attention to all these things.

Timely – The most important thing is that we should display the notification at the right time. This means that we should use it in the right time-sensitive events, especially when these are synchronous events tending to anyone.

For example, we should mark the calendar events. Through which, in the right day or opportunity, we can draw the attention to our audience through our timely notification.

Precise – The other that is very important is that your notification should have enough information so that the user gets so much information that he will not need to go to the web page.

Primarily, you should do something like this:

  1- Keep message short
  2- Title and content should be specific
  3- All important information should be kept on top and left
  4- High importance to the most important desire action
  5- That’s because there are a lot of people who read your notification well, most people see it only for a few seconds. So the more simple content, catchy headline, and the attractive image, the more chances you have to click on your notification.

Relevant – Thirdly, there must be something relevant to your notification user. Because if the user is not interested in your notification then he will never click on it. With it, you should use good and relevant content as it does not and will never click on your notification.

I have seen so many websites whose notifications are excellent but it does not have great content. This makes users think that you have cheated them and they unsubscribe your notification service. So you have to sing a valuable user.

Add Call To Action Buttons – By using it, you invite the user to do some action so that you can get a quick response too. For example use “Buy now”, “Know more” or “Share on Twitter”.

Location-based targeting – If you offer things to a user according to their location, it is possible that they accept your offer easily. For example, if you have a website of your ticketing then you can give a discount on flight tickets, or train tickets so that people will come to you in very large numbers.

Time Zone Based Delivery of Push Notifications – One thing you can not ignore here is that people can use internet according to different time zones. If India has dawned in the morning then America will have a night. So if you send a notification to the American at night, then it is not of any use for him because at that time he will be sleeping. Therefore, we should send notification in any particular time zone within their working hours. This has a great advantage for us.

You should use any method but always keep an eye on the fact that never having any notification advertisement. This reduces the confidence of people over you.

How to design Notifications with the help of Best Principles

Here I have told you about a very special Interaction pattern when you can ask your users to manipulate the Notification very cleverly.

You can offer for push notifications when the user is configuring your communication settings.

Whenever the user has finished an important task and hopes to reach it at the right time so that he can receive the relevant update at the right time. For example, if the user has purchased a product from your website and needs updates about the delivery of that item, then you can offer them for push notifications.

When the user comes back to your website because he is very happy with your service then you can offer for push notifications so that he thinks that you take care of your valuable customer.

What are the Advantages of Web Push Notification:

You do not even need another mobile app for mobile push notifications: Chrome push notifications work exactly like the native mobile push notification. So you do not need a second app for this feature.

Wider reach across browsers: It supports many browsers like Safari, Chrome and Firefox, and whose combined market share is about 61-77%. And having so much access is very good information for web push notifications.

With this you can also access other users who are not connected to the website: You can also access other users with the help of web push notifications, which are not registered on your website.

With this help you can re-engage with your users, without their contact details: Web push notifications do not require any users’ email or other contact details. If once a user subscribes to this service, then all your notifications will continue to reach him, without the email address.

Higher opt-ins are found here compared to the emails: Because users do not need to provide their email id here, therefore any new user chooses to opt for the Web notification service very easily.

Lower unsubscribe / opt-out rates: Studies have found that the rate of unsubscribing in the web notification subscription is very low compared to the Email Subscription.

Prompt (soon) and assured content delivery: In the moment you click on “send notification now”, then you get started getting all the notifications. There are many reasons why email notifications do not come in the email, or your emails are moved to the spam folder. All these troubles are not in the web notification.

Higher conversion rates: Studies have shown that the use of web push notifications has resulted in a higher conversion rate of more than 30 times if we compare it with email notification.

Greater mind share of users: sending notices to users who do not visit your website regularly, so it helps us to capture their mind-share. The benefit of which we get later.

Tech-savvy user base: With the help of Web push notification, we will have a big tech-savvy user base.

Limitations of Web Push Notification:

    No HTTP support – Web Push Notifications works only on websites that follow the HTTPS protocol. That is the website in which HTTPS is enabled.
    Not supported on IOS yet – They have not yet supported iOS, so for those websites that have large iOS traffic base, this is a losing deal.
    No rich media – These apps do not support all media, such as images, videos, gifs, audio, and other interactive elements, just like push notifications.
    The notification tray is not present in the Chrome desktop
    These notifications will not deliver to your desktop if your browser is not running.

Web push is really a very great marketing platform for Webmasters. But it is very important to remember that great responsiveness also comes with great power. You should use it because you have a very big user database and not misused it for spam advertisements. Doing this may be beneficial for some time, even if you talk about the long run, it can lead to a lot of loss. And just as your users are connected to you because of your good content, your spammy content will start to move away from you as well.

I have hope that I Gave full information about “What is Web Push Notification, how it works and its benefits” and hope you guys have understood about it. Have appeal to all the readers, share this information with your neighbors, relatives, friends so that we will be aware of this and everyone will benefit from it. We need people’s support so that I can bring new more information to you.

We are always trying to help my readers on every side. If you have any doubt, you can ask me anytime. I will definitely try to sort out those doubts. If you like this article tell me in a comment box.

Why should not we use free web hosting?

What is website and its type?


Updated: 2018-03-31 — 7:22 PM

Leave a Reply

Your email address will not be published. Required fields are marked *

KbdIndia Copyright © All rights reserved @ Dhruvraj Rentals (OPC) Pvt. Ltd. UPPRPB Board Results