Getting Started With Web Push Notifications

A Definitive Guide To Understand How Browser Notifications Work

1. What Are Web Push Notifications?

Web push notifications are clickable rich content messages sent to your device by a website or a web app. Web Push notifications can be delivered to your device, mobile or desktop, even when the user is not on your website. 

These notifications can only be sent to users who have opted-in to receive these notifications. Web push notifications or browser notifications are supported by Chrome, Firefox, Edge and Safari. You can learn more know more about Safari push notifications and Edge push notifications here. 

Web Push Notifications Explained

As these notifications are delivered directly to the user’s device, users don’t have to be present on the website to receive these notifications. This makes web push notifications extremely visible and also easy to respond to.

Push Notifications are best used for delivering time bound content and engage users. Some of the popular use cases of retargeting with push notifications include browse abandonment, retargeting users abandoning shopping cart, activating dormant users with offers, retaining users with personalized content and more.

Check out these 10+ cart abandonment templates, that help bring back lost sales. 

1.1 What are web push notifications used for?

Just like native app notifications, web push notifications are meant to facilitate timely flow of information. To subscribe or opt-in to these notifications, users are not expected to download and install an application. Users can simply subscribe to these notifications by clicking on the Allow button on the permission prompt.

firefox-notification-permission-prompt

Web push notifications are used by marketers to build, engage and retain their audience. Businesses across categories are increasingly relying on web push notifications as a solution to build and engage their audience. Online retailers and publishers now heavily use web push notifications as a communication channel to engage their audience. The primary reason for this adoption is also the plummeting performance of email, SMS and display ads.

Some of the popular use cases are :

  • Delivering Sports updates and news right on user's lock screen
  • New Articles and content posted 
  • Utility messages like traffic, weather and ski snow reports
  • Flight check in, change, and connection information
  • Sales Alerts, New Coupons, and Product updates 

Convert more of your website traffic into sales with iZooto Web Push  Notifications  Start your free trial Now. 

1.2 How web push notifications are different from app push notifications?

  • Native app notifications can take full advantage of the device features - the camera, GPS, accelerometer, compass, contact list, whereas web push notifications can’t tap into any of these features yet.
  • As Native apps can only be installed on tablets and smartphones, native app notifications are limited to these devices only. Web push notifications on the other hand can be used to reach users on Desktop as well.
  • Native app notifications support rich media - images, videos, gifs, audio, and other interactive elements. Web push notifications as of now, only support large images (only on Chrome 56 and above).

 

1.3 Where do these notifications appear on desktop and mobile

Web push notifications are delivered even when the user is not on the website. On Desktop, these notifications are delivered to the browser, right next to the task bar.

  • Safari push notifications are delivered directly to the Mac OS Notification center. With Chrome 59, Chrome push notifications became native with OS X notification center. Firefox notifications appear on the right hand corner of the browser.safari-notifications
  • On Windows, these notifications are displayed above the task bar. Chrome 68 supports the native notification systems of the Windows 10 operating system. Notifications are directly delivered to Windows Action center
  • On Linux, web push notifications are displayed in the top right section of the browser.
  • On Android, these notifications are displayed in the notification tray.

The user must be an active subscriber to receive these notifications. It is important to note that Apple is yet to support web push notifications on iOS. Check out this article to know more about iOS push notifications and stay up-to-date on the status of web push notifications on iOS. 

 

1.4 Web push notifications as a part of Progressive Web Apps

Progressive Web App is an amalgamation of all the best features of websites and native apps. They address the shortcomings of both the browser and the native apps, combating flaky networks and device space. With push notification web app, all thanks to service workers, makes it possible to receive timely notifications anywhere, anytime despite network issues. 

 

Progressive-web-apps-push-notifications

 

Know all about Progressive Web Apps (PWA) in this in-depth guide. 

 

2. How Do Web Push Notifications Work?

Once you've enabled web push notifications on your website, your site visitors will start seeing  a notification subscription prompt. You will be able to push notifications to this audience once they subscribe. They can subscribe by clicking on the "Allow Button".

 

2.1 Anatomy of a Web Push Notification Message

anatomy-2.1

There are 6 key elements that constitute a web push notification - Title, Description, Landing Page URL, Icon, Banner Image and Call To Action Buttons. You can also make use of emojis in push notifications to express yourself better. It is important to understand features of Web Push Notifications like Banner Image and Call To Action Buttons are only available for Chrome. Here is a breakdown of how each of these elements-

  1. Website Domain: The website domain which has sent the notification.
  2. Call to Action Buttons: You can add up to 2 CTA Buttons in a notification. CTA Buttons are only supported by Chrome. Firefox and Safari are yet to extend support to this. These buttons can be used to trigger different actions. For instance - taking the user to a landing page, sending out a social message (Tweet), triggering the Play Store or opening the dialler app.
  3. Icon: You can add an icon to your notification to build a better recall. The default icon is bell icon. Users are nowadays bombarded with notifications, hence it becomes essential to let your users know when your push notification pops up. Adding your logo helps users in building a brand recall. The recommended icon should be 100*100px and should be less than 20kb in size.
  4. Banner Image: Banner size images were introduced on notifications with Chrome 56. This was one of the most awaited features and rightly so - visuals help you amplify your message by as much 189%. While the copy of your notification should be eye catchy, adding a banner/large image contextual to your notification content will increase your chance of getting that click.

Recommended Dimensions : 360*240px. Size of the banner image should be less than 240kb or less. Check out this notification preview guide to know more about how notification looks across different devices.

2.2 How exactly are push notifications delivered to the user's device?

There are three actors involved with delivering a push notification, along with a fourth, optional, component for advanced functionality.

  1. Push Notification Service: Each browser, including Chrome, Safari and Firefox have their own notification delivery service. Chrome uses Google Cloud Messaging (and now Firebase Cloud Messaging ), Safari uses Apple Push Notification Service (APNS) and Firefox uses MDN servers.
  2. Service Worker Registration: Developer must register the service worker on the browser. This is only for Chrome and Firefox. Safari while has added support for service-workers, Safari notifications are delivered using a different mechanism.
  3. User’s Subscription ID: Subscriber ID is generated when a user opts in to receive notifications from a specific website.

Additionally an SDK (OS client library Software Development Kit) can be added to a web app for extended segmentation and analytics capabilities.

 

2.3 Enabling Web Push Notifications on a website

  1. Website owners can start by implementing service workers for Chrome and Firefox browsers, and by generating APN certificate for Safari browsers.
  2. Browsers provide standard API calls to read user subscription permissions for the domain and to prompt visitors for notification consents.
  3. Website owners can additionally use service providers like iZooto and use their SDK to take care of the first two steps.
  4. Website owners can push notifications to their subscribers by executing APIs provided by browser push system. This can also be done through UI.

 

2.4 User Subscription and Activation

  • Users are prompted for notification subscription whenever they visit the website with a default browser prompt. Developers and website owners can chose to trigger subscription prompts conditionally. Know more about changes in permission prompt for Chrome on Android in this article.
  • A unique registration key is generated by browser for every user who subscribes to notification.
  • Notification service provider stores the keys at their end along with any additional data points to identify subscribers uniquely.

Check out these welcome notification templates to engage the users from day zero.

Web push notification prompt

Web Push notifications can be targeted and personalised to select segments of your user base, and even personalized for specific users. As compared to email or SMS, in the context of web push, users are not required to do away with their personal information. Segmentation basis a user’s browsing and purchasing pattern ( events and properties ) can be used to create powerful audience segments. Marketers / developers would need an interface for writing messages, selecting the target audience and pushing or scheduling notifications.

Publishers can build repeat traffic by leveraging web push notifications. They can build this infrastructure themselves, or leverage existing tools such as iZooto. Increasingly, web developers opt for iZooto for these services instead of building them, so that they can focus on building their web apps. Building and maintaining a cross-platform web push notification service is bound to consume significant resources and time. SaaS Platforms such as iZooto are best suited because:

  • Rich Analytics and Reporting
  • Real Time Push and Scheduling as per local time zone of user
  • End to End mobile marketing automation
  • Collection and segmentation of user data
  • Cross-platform support and regular updates 

 

2.5 Sending a Notification

Marketers follow a simple process and answer 3 simple questions before sending a notification - 

  1. What - Understanding the content that you want to send to your audience and making sure that the content is not only apt for this medium but also that you have right copy and creatives ready.
  2. When - No one likes notifications delivered at 2 AM in the morning. Getting the timing of your notification right is extremely critical for better user engagement. You may choose to send the notification immediately, basis action/trigger or schedule them well in advance.
  3. To whom - It is extremely important to understand your audience and asking yourself - who would get the maximum value from this notification. It is important that you define the audience to whom you would want to reach out with these notifications. The audience filters are typically managed by the service provider, and provide options to send notifications to all, to a specific subscriber, to a segment of subscribers.

 

2.6 Which browsers support web push notifications?

Currently, only Chrome, Firefox on Android OS, Windows, OS X, Linux and Safari on OS X support web push notifications. All Chromium based browsers also support web push notifications. None of the browsers support web push notifications on iOS.

On Desktop or the large screen, web push notifications are supported by Chrome, Firefox and Safari across Windows, Mac OS and Ubuntu.

For example - while segmenting your subscriber base by their recent activity, it can you help you identify your most active and dormant subscribers. Further, pushing out personalised notifications to subscribers will help build a strong recall and encourage loyalty amongst them. It could also allow you to send follow-up campaigns to your most unengaged subscribers — the ones who haven’t done any activity in the past few days.

 

Device

 

OS

 

Browser

Mobile

 

Android

 

Chrome ( 42+ )

Firefox ( 48+)

UC Web 

 

Mobile 

iOS

Not supported

Desktop

 

Windows

Linux

OS X

 

Chrome ( 42+ )

Firefox ( 44+ )

Safari ( 7.1+ )

Tablet

Android

 

Chrome ( 42+ 

Firefox ( 48+) 

Tablet

iOS

Not Supported

Desktop vs Mobile

 

 

Desktop

 

Mobile 

 

Permissions

 

 

Opt-in Required

 

 

Opt-in Required

 

Character limits for notification

Depends upon the screen size, width, and the input language selected. 

Depends upon the screen size, width, and the input language selected. 

Direct app open

 

Yes

 

Yes

 

Deep link support

 

Yes

 

Yes

 

User control

Yes 

Yes

Image support

Chrome only

Chrome only

Badge

Starting Chrome 53 

Starting Chrome 53

Sound support

No 

No

Payload limit

2 kilobytes

4 kilobytes

Interactive buttons

Only for Chrome Web Push Limited to 2

Only for Chrome Web Push Limited to 2

Feedback

Not from an app, rather through APNs Feedback Server

Yes, response from the App/Device

Direct app feedback on delivery

No

Yes 

Device management

Notifications are displayed when delivered. No Notification Center 

Notifications are displayed on lock screen and are available in the notification tray

Two way messaging support

Upcoming Feature in Chrome

Upcoming Feature in Chrome

 

2.7 Can HTTP websites send web push notifications?

By default, web push API can only be used by websites operating on HTTPS protocol. For websites operating on HTTP protocol, subscribing to web notifications is a 2-step process. The subscription process involves the user subscribing to a secure subdomain such as yourdomain.izooto.com or notify.yourdomain.com. Since this is a two click process, the opt-in rates are far lower as compared to HTTPS, hovering around 1% - 3%.

 

2.8 Permission UX - The Right Way To Ask A User To Subscribe To Notifications

It is important that users are convinced to subscribe to notifications before they are prompted. There are multiple ways of educating the end user. Here are some of the recommended approaches :

1. The user should show intent before a site asks for permission : Most of the marketers and developers commit the mistake of asking permission on page load time. This is not an ideal experience and impacts the opt-in rates adversely resulting in more users actually blocking than allowing for notifications.

web push prompt example 1web push prompt example 2web push subscription prompt

2. Using a custom opt-in prompt : Brands can use their own custom opt-in prompts which resonates with their website to trigger a sense of trust and favourable impression. Most push notification service providers provide a wide range of options where you can play around with the logo, text and color.

A custom prompt also has an additional value. It allows you to explain the value of enabling web push and gives you the option of prompting again if the user declines. 

web push custom optin1web push custom optin2

Do not feel the need to receive notification from a particular website? Check out this guide to turn off chrome notifications.


Convert more of your website traffic into sales with iZooto Web Push Notifications.

Start your FREE trial Now. 


 

3. How Do People Respond To Web Push Notifications?

 

3.1 Understanding Subscription Rate of Web Push Notification

One of the most frequently asked questions is how many users subscribe or opt-in for web push notifications. All the leading browsers - Chrome, Firefox, Safari, Opera, edge, UC browser and other Chromium-based browsers now support web push notifications. The permission or opt-in process is similar across the browsers. Users are required to grant explicit permission to a website (web app), hence opting-in to receive push notifications. It is important to understand that the capability of web push notifications is only for websites operating on HTTPS protocol (with an SSL certificate). Subscription or opt-in rates usually vary from anything between 5% to 10% of total unique visitors, depending upon the implementation. Marketers often use a double opt-in process to ensure that users opt for notifications instead of blocking them. To convert your website visitors into subscribers, it is critical to design the right subscription UX with web push notifications.

 

3.2 Understanding User Response of Web Push Notification

Click-through rate for push notification is defined as the number of clicks on a notification divided by the number of subscribers who have viewed the notification. Marketers often use Notifications Clicked/ Notifications delivered to calculate CTR's. For example, if a notification is delivered to 100 subscribers and receives one click, then the click-through rate for the notification would be 1%. Most marketers use this metric to understand the effectiveness and success of their push notification campaigns. There is no pre-set benchmark of click-through rates of push notifications. CTR's of push notifications depend on multiple factors including -

  • Content of the notification
  • Timing of the notification
  • Target audience to which the notification delivered
  • Frequency at which notifications are pushed

 

3.3 Targeted Notifications vs Mass Broadcast Campaigns

‘One size fits all’ doesn’t work very well with Web Push Notifications. Assuming that all subscribers will have the same preferences can result in a high number of users unsubscribing from notifications. It’s common knowledge that sending targeted notifications can help you engage better and get higher click rates. Also by narrowing your focus and targeting selective segments, your subscribers will find your notifications to be much more relevant and keep them from churning away.

For example - while segmenting your subscriber base by their recent activity, it can help you identify some of your most loyal subscribers. It could also allow you to send follow-up campaigns to your most unengaged subscribers — the ones who haven’t done any activity in the past few days.

Similarly, if you planned to target recent subscribers with a “Subscription Date” segment, you might encounter higher engagement and lower bounce rates (due to definite recall) than you would if older subscribers were targeted. Click Through Rates on notifications targeting a specific audience can be as high as 40% also.

Check out this article to know the secret to triggering emotions with web push notifications

 

4. What Can You Use Web Push Notifications For?

 

4.1 Understanding the Impact of Web Push Notifications

While the adoption of web push notification has been nothing short of crazy, the question on the impact of web push implementation still exists in the minds of marketers.

Well, here is the short answer – No.

There is no negative impact of implementing web push notification. The fact that Google has been pushing for it aggressively, definitely suggests that there is no possible negative impact.

Read this detailed data-driven post on the impact of Web Push Notifications on SEO

We analyzed over 55K transactions where the journey had started off from a click resulting from an organic search result. Know how what we found and see how web push notifications help optimize micro funnels

 

4.2 Industry wise use cases

Learn more about industry-specific use cases. 

#E-Commerce Activation

You can read more about how these use cases of web push notifications for small businesses to delight users. If you are a retailer, give this article a read to know how you can boost the retail store sales with web push notifications. If you are an e-commerce merchant, then definitely check out these drool worthy use cases- e-commerce marketing using web push notifications

Audience Builder for E-commercejabong-notification-1

#Financial Services: Lead Nurturing

You can check out other use cases on web push notifications for banking here. 

Audience Builder for Lead Genmaxlifeinsurance-notification-1

#Coupons: Engagement

Check out use cases of web push notifications for online food businesses.

Audience Builder for Coupon Sitescouponzguru-notification-1

#Ticketing: ReTargeting

Check out more use cases to know how to engage and re-target users here-  Web push notifications for travel industry

flightsok-notification-1Audience Builder for SaaS

#SaaS: User Acquisition

Check out different use cases for SaaS, to engage and generate leads using web push notifications.

supercoder-notification-1supercoder-event-1

Check out industry wide use cases and know how web push notifications can help you. Check out other cool ways web push notifications help businesses.

 

5. How To Create An Effective Web Push Notification Strategy

 

5.1 Best Practices

An effective Web Push Notification campaign can easily outperform Email Marketing when executed well. Here are tips you can follow to ensure that your web push notification campaign is a success:

Personalization

Personalized messages teamed up with behavioral data perform much better. The messages are highly targeted, timely, and personalized. For example: An e-commerce site sends you a message that those shoes you were browsing last week are now available in your size. When you tap in, the message takes you right to the product page for the shoe with your size checked.

personlized e-commerce notification
actionable e-commerce notification

 

 

Add Call To Action Buttons

A Call-to-action (CTA) can be added to provoke an immediate response, usually using an imperative verb such as "Buy now", "Know more" or "Share on Twitter".

Push Notifications with Images

We all know “a picture is worth a thousand words”. Notification with an image and call-to-action is worth a lot more than that. Along with call-to-action buttons, Chrome Rich Notifications capture mobile user’s attention and offer powerful ways to interact with push notifications, providing more data for personalization and creating refreshing experiences for users.

rich e-commerce notification
location based targeting

 

Location based targeting

While subscribing to notifications, there are few properties that are captured by-default at the browser end - with one of them being Location. Websites can use location data combined with behavioral data to send relevant notifications such as:

  • Sending discounts: A ticketing website can send you discount on your flight tickets
  • Suggesting nearby places: A food delivery website can suggest you nearby
  • Places to order from

Timezone based targeting

 

Time Zone Based Delivery of Push Notifications

Internet is everywhere and so are your users – prospects and clients. Clearly, you can no longer afford to ignore that “international-time zone-user-set”. Especially, in such cases, communicating with users across different timezones is a key challenge. More than often marketers not paying heed to this, end up irritating customers. End result – user churn. It is for this reason, understanding your audience is extremely critical. There is fair amount of sensitivity attached to receiving notification on the wrong time – we help you take cognisance of that. Read this detailed guide to know best time to send push notifications

You can check out these 6 web push notification experiments to see what works for you. 

 

5.2 The Dont's

  • Don’t get too greedy. As close to 10% users opt out of push notifications altogether if the notifications are too frequent. Instead send contextual notifications as per their interest and behaviour and see higher engagement.
  • Don’t rely only on native opt-in prompts. You might get high opt-in rate initially but on the other hand, it would result in a high amount of churn as well.
  • It’s far more effective to build a custom prompt that pops up right before the native prompt to better communicate your brand and the value of enabling push. As an added bonus, if they say no, a custom prompt makes it easier to ask again later.
  • Don’t give it all. Push notifications are meant to drive users to click and engage, so they aren’t ideal for explaining users about the finer points of your offer. Instead, you can link to the landing page where your offer is more explained. The best performing notifications are always the one with catchy titles, short description and bright images.


5.3 Limitations

  • No HTTP support - Web Push Notifications work only on websites that are on HTTPS protocol.
  • Notifications are fundamentally personal to a user. The data points that are pushed and received are private and to ensure that privacy, it is supported only on secure websites (HTTPS).
  • Not supported on iOS yet - A major drawback for websites having large iOS traffic base.
  • No rich media - Unlike app push notifications which supports images, videos, gifs, audio, and other interactive elements, web push notifications supports large images (360*240 size starting Chrome 56 and above).
  • No notification tray on Chrome Desktop
  • Not delivered on desktop if the browser is not running

 

6. Build vs Buy

Should I Build My Own Web Push Solution Or Use A 3rd Party Service Provider?

There are couple of points to keep in mind before taking that “Make or Buy” decision. Building a web push notification platform will, in fact, make it a second product altogether within your core business - a product that demands continuous resources to -

  • Develop the solution
  • Test and release the product
  • Fix the bugs  
  • Ensure security
  • Provide ongoing support and maintenance
  • Keep in sync with the technology updates

When making that rather important “Make or Buy” decision, ask yourself - are you ready to put in that amount of resource, time and money?

Your sheer focus rightfully needs to be spent on your core business/product, which, as we all know pretty well, isn’t web push notifications. So why not let the “others” take care of it, the ones for whom building web push notifications is the core product? They’ll help you do a much better job at it, don’t you think?

 

6.1 Checklist for selecting a 3rd party push notification provider

  • User Data Security
  • Lock In - Import and export data to other service providers?
  • Implementation Process and Permission UX
  • Send push notifications that include CTAs, pictures and other rich media (i.e. rich push notifications?
  • Automated push notifications
  • Reliability and Ease of Use
  • APIs?
  • Customer Support
  • Reporting and Analytics
  • Pricing

Compatibility

  • Browser Support - Chrome, Firefox, Safari on Mobile and Desktop
  • Custom Deployment for HTTP Websites
  • Ability to scale swiftly as you grow
  • Push notification service that can handle the volume without crashing or missing message sends?
  • Speed of push notification delivery?

Segmentation

  • Level of customer segmentation and message personalization
  • Personalization
  • Custom events
  • Geo-location
  • Behavioral Segmentation
  • Dynamic Audience Segments
  • ReTargeting

Features

  • Notification Expiry Time
  • Time Zone Based Scheduling
  • Push Notifications with Banner Images

Support

  • In-App Support
  • Dedicated Account Manager
  • Standard Support

Reporting

  • Subscriber Profiling
  • Subscriber Churn Report
  • Campaign Performance Report

 

Further Reading

Get Started With The New Way Of Engaging Your Users

Set up in Minutes. No Credit Card Required.

  • G2crowd-logo
  • Magento_Technology_Partner_Large
  • iab_SEA_INDIA_RGB_FC
Questions icon

Questions?

Chat With Us

Switch to iZooto

Using Push Notifications?

Switch to iZooto

one-finger-tap-gesture-of-outlined-hand-symbol

2 Weeks Free Trial

Get Started Now