Web Push Notifications: What Are They and How Are They Different From Mobile?

Posted on January 7, 2020

Want to save this article for later?

Web Push Notifications: What Are They and How Are They Different From Mobile?

Depending on what your app does, your communication with users will take on a different tone and messaging. News apps, for example, must take a neutral, straightforward, and unbiased tone, while hyper-casual gaming apps can be more playful in push notifications. 

Either way, there are strategies you can use to provide additional value for your site visitors and web app users. For example, you can provide a summary of breaking news, or you could send a funny quip about how long it’s been since a gamer has last played.1 

In this piece, we delve into what web push notifications are, how they differ from mobile, types of notifications, and examples of effective push notifications.

Web Push Notifications: What Are They? 

Push notifications are text or rich media messages, similar to SMS texts, sent to a device from a third-party application. Push notifications are one-way lines of communication broadcasted to your audience and emerge on the screen to alert and inform the user of an update. 

Web push notifications are specifically delivered to users of desktop or laptop computers while mobile push notifications are sent to users of smartphones or tablets. 

Push notifications are especially helpful for providing time-sensitive content, relevant information, user interface tips, communication updates, and more. Depending on the state of the device when sent, push notifications can appear temporarily and disappear automatically, or require action by the user to close them.  

Web and mobile push notifications can be used independently or in combination across various devices. 

the benefits of push notifications including web and mobile which can be used to send timely, relevant, and personalized messages.

Web Push Notifications vs. Mobile App Push Notifications 

It’s important to understand the distinction between web and mobile applications because it can present opportunities for your push strategy. 

Mobile push notifications are especially helpful for engaging users even when they are not actively using the device since they are delivered to the smartphone’s lock screen. Web push notifications, on the other hand, are helpful for reaching users who are currently active on the device but may not be actively using your website or web application.

Although web push notifications can be presented when the user re-engages with the device, by then the data may be stale or inaccurate. 

The Web Push Notification Opt-in Process

First, the user must allow notifications to be shown, which provides subscription information for that device. This, unfortunately, means if the user changes devices, they must grant access again. 

Once the user has opted in to receive web push notifications, they will receive messages until they opt-out or block the delivery of notifications. 

One strategy to keep users engaged with push notifications is to provide them with a helpful dashboard for managing their preferences. Slack, for example, provides a helpful center for managing push notifications, on both web and mobile. Preferences include the types of messages to be notified about, sounds, whether there is a preview of the message, and more. 

how the web push notification opt in process works using example from slack

How Web Push Notifications Work 

Once a user opts to receive web push notifications, a certificate is stored in the webserver to identify and confirm that a user’s device can accept web push notifications. When ready to send a notification, the request is sent via the web push protocol.2

Once sent, a push service will keep the message on the server until the user comes online and the web push notification is delivered or the message expires. If the message has an expiration date, you can specify how long the message should be enqueued before it is removed, undelivered. 

The ability to temporarily stage push notifications to only be sent if the user is available within a certain amount of time is essential to avoid time-sensitive messages being delivered late.

When the message arrives on the user’s device, the browser invokes the service worker, which is a script that enables messaging offline and can even run when the browser is closed entirely. Finally, the push notification is dispatched and delivered. 

the process for sending and receiving web push notifications

6 Types of Web Push Notifications

There are many reasons for sending web push notifications. Depending on the industry you serve, you may be providing extremely time-sensitive content like traffic updates, news reporting, stock market moves, and more. 

As a general framework for the potential use cases that web push notifications can contribute to your communication strategy, we’ve broken down six types of web push notifications below: 

1. User lifecycle

Is it more important to have an amazing first-time user experience or an ever-evolving level of quality that keeps users consistently engaged? 

It’s likely a combination of a great onboarding experience and a great ongoing experience that keeps users engaged over time, and push notifications can contribute to both. 

Using web push notifications during the onboarding experience is helpful for making initial offers, but also as a method for re-engaging after that first-time user experience. Considering that 77% of users drop off after 72 hours of downloading an app, it’s important to keep users engaged and entertained. 

Push notifications can be used effectively during the customer lifecycle, for example, to send a welcome message to new users, bring them back to their abandoned shopping carts, thank them for their orders, notify them of shipping and deliveries, and re-engage them with relevant offers, among others.

welcome message push notification from CleverTap

In the example above, we send users a welcome message with helpful tips for extracting value from our site. 

2. Information 

Another common use case for web push notifications is to provide information such as a breaking news story, updates that require attention, and other relevant information. 

Time-sensitive information is one of the most valuable forms of web push notifications because they offer helpful alerts, catching the user’s attention for a quick reminder or update.

push notifications from Google Calendar on web

A great example of this time-oriented notification is the reminder of a calendar event. Perhaps you’re distracted by the task at hand and would otherwise blow right through your allocated time block. Push notifications can help keep you on schedule and avoid missing important events. 

3. Communication

When sending messages either between the company and user or between two or more users, web push notifications enhance the overall communication process.

Being notified through push notifications is helpful to quickly determine the urgency and nature of the message, without being removed from the current user experience. If the messaging app has both a web and mobile app, the notifications can even be sent across multiple platforms, providing users with more opportunities to stay up-to-date with the discussion. 

cross platform push notifications with the same message

In the example above, the same message from CleverTap’s CEO, Sunil Thomas, is sent via a web push notification and mobile push. This feature prevents users from missing important messages and keeps the conversation flowing smoothly. 

4. Education

Web push notifications are helpful for educating users along their journey with your app and providing supplemental resources. 

This can take the form of a message that educates the user about how the app works, like an automated tooltip. In the example below, Dribbble, a platform for designers, uses a web push notification to offer an educational statistic about the skill designers value the most, likely a relevant insight for most users.

example of educational web push notification example from Dribbble

This web push notification from Dribbble not only provides a helpful statistic but access to the full report, helpful for keeping users engaged and educated. 

5. Promotion 

One of the most common use cases for web push notifications is to offer promotions such as coupons and discounts. Although these types of push notifications can be extremely beneficial for keeping users engaged and increasing conversions, they can easily be overused.

Keeping offers like this to a minimum during the user journey is recommended — their scarcity can actually enhance the user experience, making their presence a welcome surprise. 

example web push notification from Honey and Overstock to receive coupon deal

In the example above, Overstock and Honey have a special coupon to receive 8% off. Using a “Remind me at checkout” button is a great way to bridge the gap of annoying users with too many unwanted messages while keeping them informed. In this case, the user opts in to receive another web push notification before completing the transaction. 

6. Confirmation

Another common web push notification is to provide the status of a user action, whether an error occurred or the desired action was successful. 

Web push notifications can be used in combination with microinteractions to keep users informed as their actions are being processed and when a response has been determined. 

For example, when a user subscribes to a YouTube channel, the button will change color and a web push notification is used to confirm the subscription process was successful. 

example of a confirmation web push notification from YouTube when user subscribes to a channel successfully

Enhance the User Experience With Web Push Notifications 

Whether your business operates a web app, mobile app, progressive web app, or standard web site, web push notifications can be used to enhance the user experience. 

Use the tools available to help your business succeed, but use them strategically. CleverTap’s mobile marketing platform for delivering web push notifications enables you to use deep links to send specific users to certain pages and analytics to track performance

Sign up for a demo to learn how CleverTap can help enhance your mobile marketing with web and mobile push notifications.

Grab-and-Go Push Notification Templates

Grab-and-Go Push Notification Templates

40+ ready-made push notification templates with suggestions for rich media and pre-designed calls to action.

Download Ebook Now