Table Of Contents

What Is Web Push Notification?

We all must have heard of Web Push Notification used in today's marketing. To get more clarity, let's try to understand what is web push notification and how it works. Web Push Notification is the small push message you receive in your desktop browser or mobile browser. Push Notification Message will appear on your active browser. That is the most basic and primary use of browser notifications – to engage with users even when they are not on your site. If you have integrated web push notification on your website, you can send push notifications to your subscribers. Web Push Notifications are also called Browser Push Notifications as they are delivered on an active browser. You can even build your own push notification tool or use the web push notification service to start push notification for the website. By the end of this article, you will have a clear understanding of What is Web Push Notification and its usage and benefits.

Before you start integrating push notifications on your website, always remember to avoid vendor lock-in. Check out the guide to install push notifications without vendor lock-in. You can switch vendors any time without loss.

Who Can Use Web Push Notifications?

Web Push Notification is one of the easiest ways to engage with users. Any online website can integrate and use Web Push Notifications. You don't need to build a complete infrastructure. There are many vendors who offer Push Notification services. In today's time push notification on a website is a must to re-engage users efficiently. Any website can use browser notifications to increase re-engagement with users.

Where can I see Push Notification On Desktop & Mobile?

After opening the browser, you will receive Push Notification from your subscribed website. Depending on your OS, Push Notification will appear on your browser:

  • On Linux OS, Notifications will appear on the top right side of your browser
  • If you have Windows OS, you will receive the push notification on the bottom towards the right-hand side
  • Android OS will receive the push notification on the notification tray

Currently, Web Push Notifications are supported on:

You will receive Push Notification on Browser only when you subscribe to the same on the website. Currently, Safari on iOS doesn't support Web Push Notifications.

What Is the Use Case Of Push Notifications?

Push Notifications are delivered in real-time and appear as an alert on the browser. You can use browser notifications for an array of Marketing activities. Some of the cases where Push Notifications are used extensively are:

  • Latest news alert
  • Abandoned Cart campaigns
  • New blog post
  • Sale event
  • Flight notifications
  • Score update for sports

There are numerous ways you can use Web Push Notification for your online business.

Are Web Push Notifications and Web Notification the same?

Web Push Notification and Web Notification are completely different. Both notifications appear on the browser, however, they are fundamentally different.

  • Web Notification: It works only when a user is on the website. The user will receive the notification only if present on the website.
  • Web Push Notifications: It works even when the user is not on your site. It is delivered in real-time on the browser and doesn't depend on which site user is browsing.

Why Should You Start Using Web Push Notifications?

Web Push Notifications is by far the fastest way to engage with customers. You can reach out to customers instantly. Once a user is subscribed, they will get website notifications even when they are on another website. The push notification will appear on their browser. Since push notification appears as an alert on the browser, it's hard to miss by the subscriber. This leads to higher CTR as compared to other marketing tools. Most of the engagement tool works only when the user is on the site, however, browser notifications are delivered even when the user is not on your site.

What are the advantages of using Web Push Notification?

There are many advantages of using Web Push Notifications:

  • A mobile app isn't needed to receive any notifications – Web Push Notification is browser-based and so without a mobile app, you can reach out to customers
  • Easy opt-in for users – Users need not share any personal details. With a single click, the user can subscribe to push notifications
  • Higher opt-in – The opt-in process is very simple as compared to email. The opt-in rates are higher than e-mail.
  • Instant delivery – Web Push Notifications are delivered in real-time to the user browser.
  • Increased Engagement – Push Notifications are delivered even when the user is not on site. You can re-engage with the user on any browser.
  • Web Push Notifications derive higher Conversion Rates – Web Push Notifications are delivered instantly on the browser.
  • Less opt-out rate or unsubscription rate – Recent studies have shown that less than 10% of user unsubscribe to push notification in a year

Now let's know and understand Web Push Notifications in-depth and how it works.

What Are The Different Elements Of Web Push Notification?

What is Web Push Notification

A Web Push Notification comprises of four key elements:

  • Web Push Notification Title The title is the most crucial part of any Web push message. It catches the attention of the user and urges them to click on your notification. Send engaging titles like Buy 1 Get 1 Free, Last Day Of Sale or any other title to get user attention.
  • Web Push Message The message should be short, crisp and direct. It should be able to convey the idea instantly to the user without a second thought. But make sure that the content quality of the message doesn't go weak.
  • Website Icon Show the icon of the website in the message. It is essential to convey the message confidently.
  • Push Notification Image Include a large image which is the graphical presentation of the notification message. The image is optional. You can send push notification without an image as well. It is available only for Chrome.
  • Call To Action Buttons Call to Action or the CTA Buttons is the most crucial element in a Push Notification. The CTA should contain the URL of the landing page so that the user directly lands on the landing page. With PushEngage, you can send multiple Call To Action in a single notification. It is available only for Chrome.
  • Emoji In Push Notifications Include Emojis in your push notification. Emojis give a sense of personalization to your notification. Push Notifications with emojis show an 85% increase in open rate as compared to notifications without emojis.

Want To See Demo Of How Notification Appears?

How Web Push Notification Appears In A Browser

You can easily check the Push Notification Demo on your browser. Click on this link (Demo) to see the demo for Web Push Notification. In the demo notification, you can:

  • Give a new title to push notification
  • Edit the notification message
  • Enter the URL for the notification. When users click on your notification, they will be re-directed to the URL you mention here.

How does Web Push Notification work?

To understand how push notification works, we need to know the different stages of push notification. Since it's a browser-based notification, the browser has to support the same for the web push notification to work. There are three stages of sending Web Push Notification:

Seeking permission to send the Push Message

Subscription Pop-up for push notification

The first step in implementing a push notification is to seek the permission of the user to send him a push message and getting a push subscription from the browser. With Subscription Dialog Box or Opt-in box, we ask users permission. A Push Subscription is done with a Push API that gives web applications the ability to receive messages pushed to them from a server. Once Push Subscription is received, the details are saved at the back-end and are later used to send push messages to that user.

Sending a Push Message

The push message is sent to the users via the PushEngage dashboard or through an  API call to a respective browser cloud manager – like GCM, APN, etc. The cloud manager validates and delivers the message to the right browser. The endpoint value in Push Subscription helps you get the appropriate URL to trigger the push message. In short, the push message is sent from your server to Push service and the message arrives on the appropriate browser.

Push Message arrives on the User's browser

Once the browser comes online, the push service delivers the message. The browser receives the message, decrypt the data and sends push event to your service worker.

How To Start Using Web Push Notification Service?

Getting web push notification for any website is very easy. Website owners have to install the JavaScript code of the web push notification service provider on the header section of the website and enable them. Once you install the Push Notification, you can start gathering subscribers and then start sending push notification from your website.

Install Push Notification On Website

In three steps you can go live with web push notification for your website

  • Install the Javascript/installation code Below is the example of the JavaScript code or installation code for PushEngage. Put this code in the header section of your page.

Once you put the JavaScript code on your website, do the basic settings to enable Push Notification on your website.

  • Changes in site settings Update your domain name, site logo and site URL
Update Settings for Web Push Notification
  • Subscription/Opt-in Dialog box settings Select the type of Push Notification Opt-In box type. Also, make changes to the opt-in title and message with the call to action buttons.
Subscription Pop-up settings for push notification

That's all you have to do and you are live with Web Push Notification for your website.

Free trial for push notification

What are the technical requirements for using Web Push Notification?

For Web push notification to work, your site has to be an HTTPS.  Also, the browser you are using to visit the site should support the web push. Currently, Chrome, Firefox and Safari based browser supports Web Push Notifications.

To know whether your site is HTTP or HTTPS, see the below screenshots:

HTTP site for Push Notifications

For HTTP site, the link will look like this: 

HTTPS site push notification

For HTTPS website, you have to install two files: 

service-worker file and manifest. son in the root folder of your website.

How exactly Browser Push Notification works for a non-HTTPS website?

For web push notification to work, it needs an HTTPS website. However, for the non-https website, PushEngage uses a custom sub-domain. For example, your site name is and is a non-https website. When you register at PushEngage, you can create a subdomain: This way you will have a custom sub-domain which is HTTPS and you can go live with Web Push Notification.

Below is the screenshot which will give you a clear picture.

Opt-in message

opt-in message for web push notification

Intermediate Page

intermediate page for Web Push Notifications

For more details on the Web Push Notification installation, you can check this video link.

How Do Push Opt-in Works in Web Push Notification?

Web Push Notifications are permission-based service. A user has to allow you before you can start sending push notifications. To allow a user to subscribe to your notification, you have to show him the push notification opt-in. After the user clicks allow, you will be able to send push notifications to your subscribers from your website.

Once you integrate push notification on your site and configure the subscription dialog box or opt-in box, it will start appearing on your website.

Configure the opt-in box or subscription dialog box:

  • Op-In Message Select the right message. This is the 1st interaction with your customers. If messaging is conveyed rightly, the user will subscribe to your notification.
  • Op-In Logo Put the logo of your site on the subscription dialog box. It will allow you to connect with the user.
  • Delay The timing of showing the subscription dialog box differs from site to site. Many websites show the subscription box once user stays on the site for some time and some shows immediately. You have to do rounds of tests to see which is the right time.
push notification opt-in

See the below screenshots of different push notification opt-in:

Once a user clicks on the "Allow" button, they are subscribed to your push notification and you can now start sending the push notification to the user.

Are Push Notification Opt-In Single Step Or Two Steps?

Push Notification opt-in can be either a single-step opt-in or two-step opt-in.

Single-step opt-in is available only for the HTTPS website. To enable a single-step opt-in for push notification, you have to put two files in your root folder: service-worker file and manifest.json.

This will allow you to enable a single-step opt-in for your push notification. Below is the single opt-in example. Once a user clicks "Allow", he/she will be subscribed to Web Push Notifications.

single opt-in web push notification

For the non-https sites, the opt-in is in two steps. Once a user clicks on "Allow", they will be shown an intermediate page. Below is the screenshot of the intermediate page:

double opt-in push notification

Once users click "Allow" to receive a push notification from your site, the user will get subscribed to your push notification.

What Are The Different Types of Push Notifications?

There are mainly three types of Web Push Notifications:

  • Alert based Web Push Notifications
  • Trigger-based Web Push Notifications
  • Segment based Web Push Notifications

Alert based Push Notifications

Alert Based Web Push Notifications

Alert based Web Push Notifications are those generated by the company. As the title suggests, it is sent to inform the user about an upcoming event or sale or any other happening. Eg: A new blog post, a flash sale, limited sale offer, exclusive offers, and sale, etc are known to be Alert based Web Push Notifications.

Trigger-based Push Notifications

Trigger-based Web Push Notifications are those sent based on the actions performed by the users on any website. For example, if a user has registered on a particular website, the site will send him notifications if there is a huge price drop for a particular product. A user would have been looking for the same product for the past few days. He might have abandoned his cart earlier or the product is out of stock. Then, the website can send him notifications to remind him of his abandoned cart or when the product is back in stock.

Segment based Push Notifications

Segment Based Web Push Notifications

Segment-based Web Push Notifications are those which are sent to a particular set of users segmented based on various factors including gender, age, geographical area, buying habits, etc. Sending segmented notifications can increase the click rate as well. Sending notifications based on the purchasing behavior and gender can get you a higher conversion rate.

What are the top features of Web Push Notifications?

Web Push Notifications have many features that you can use to create different marketing campaigns.

  • Schedule Notifications You can schedule when you want to send your notifications. This way you will never miss time-critical notifications
  • Drip Notifications You can create a series of Web Push Notifications to nurture and educate users. This helps in converting leads to customers.
  • Segmentation Notifications sent to segmented users can result in an increase in open rates and higher click rates as compared to non-segmented users.
  • Customization
    Customize your notifications for each segment. You can also include Emojis to make your notification more personalized.
  • Abandoned Cart Notifications Create an abandoned cart campaign and convert them into customers with Web Push Notifications. Since push notifications are delivered in real-time, it can lead to higher conversion.
  • Local language With PushEngage you can send push notifications in the native language of the user. Notification sent in the local language stands out and generates a higher open rate. With PushEngage, you can use all the languages that can be captured in UTF-8 characters.

What are the impacts of using Web Push Notifications?

Use Web Push Notifications the right way as a marketing channel and you are sure to get high returns for the effort rendered. Follow the best practices of push notifications and see the impact.

  • Web Push Notifications drive user engagement rate by 75% Well, web push notifications are delivered on a real-time basis, so they tend to reap a higher engagement rate than any other marketing channel. It not only enhances customer engagement but also helps in customer retention.
  • Improve Click Rates Web Push Notifications derives higher click rates as they show a higher open rate than emails. The click rate for Web Push Notifications is up to 30% when it is only up to 3% for emails.
  • Increase Subscription Rates People find it more convinced to register themselves to Web Push Notifications as they need not submit any personal information. This automatically increases the Subscription Rates. You can enable a single-step opt-in for the subscription. It requires a single click and leads to a higher subscription rate.
  • Boosts Conversion Rates Using Segmentation and Personalization, one can send notifications to users when they are active the most and on those products, they are looking for. This leads to a higher conversion rate as the notifications are sent to targeted users and so it derives the desired result easily.
PushEngage For Chrome Push Notifications

What are the Different Platforms Web Push Notification support?

Web Push Notifications supports integration on multiple platforms. You can use it on the WordPress site, Wix site, Weebly Site, Shopify Site. The integration of Web Push Notification is very simple. You can check the push notification installation guide which explains in details of integrating Web Push Notifications on different platforms.

Comparison Of Web Push Notification Service And Email Service

Web Push Notification ServiceE-Mail Service
Easy subscription as user doesn't have to share any detailsUser needs to enter e-mail id for subscribing
Delivered Instantly to browserDelivered to inbox
Notification appears whenever user opens browserUser has to login to his email to view the message
Shows in browser even when user is not on the websiteAppears only in the inbox of the email used for subscription
Notifications always get deliveredEmails may get delivered to spam

Performance Comparison of Web Push Notifications and Email

Comparison on Web Push Notifications and Email

Which Browsers Supports Web Push Notifications?

DeviceOperating SystemBrowser
Chrome, Firefox, Safari, MS Edge
Chrome, Firefox, Safari, MS Edge
Windows OS
Chrome, Firefox, Safari, MS Edge

How To Create The Most Effective Web Push Notification?

We have done a lot of case studies and created resources for you to know which are the best practices to follow.

Best Practices to follow to make an effective Push Notification

  • Use of Rich Push Notification
  • Eyeing the right time to send a notification
  • Personalization of notification
  • Notification with proper CTA buttons
  • Send notifications based on the time availability

Guide to improve your Web Push Notification results

Now you know what is web push notification and its benefits. Its time to integrate the browser notifications on your website. However, before you integrate, evaluate the web push notification service provider and then choose the one which suits you.