Industry Best Practices & Top Insights delivered to your Inbox.
Blog General

2024 Insights: Harnessing the Potential of Web Push Notifications

Subharun Mukherjee 18+ years of experience leading product strategy, Go-To-Market (GTM), new market entry, value-based sales, analyst relations, and customer experience programs. Expertise in Financial Services, eCommerce, on-demand services, and the SaaS industry.
2024 Insights: Harnessing the Potential of Web Push Notifications

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.

What Are Web Push Notifications?

Web push notifications are messages that a website sends to its users’ web browsers, even when the users are not actively on the website. These notifications appear as small pop-up messages on the desktop or mobile device screen, typically containing brief information, a call-to-action, and sometimes an image or icon. Web push notifications are an effective way for websites to engage with their audience, provide timely updates, and encourage user interaction.

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 below, illustrating each with a web push notifications example: 

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 web push notification example above, we send users a welcome message with helpful tips for extracting value from our site. 

2. Information 

Another common use case for mobile 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 (see one of the most common desktop push notifications above). 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

CleverTap is a comprehensive customer engagement and retention platform that offers a range of features to help businesses engage with their audience and drive growth. When it comes to web push notifications, CleverTap provides powerful tools and capabilities to enhance your business growth.
By leveraging CleverTap’s capabilities in web push notifications, your business can deliver personalized, data-driven messages to users, enhance engagement, and foster growth by optimizing communication strategies.

Talk to Us to learn how CleverTap can help enhance your mobile marketing with web and mobile push notifications.

Last updated on May 2, 2024