Web Push Notifications Explained

Web push notifications are clickable messages sent to a browser on your device. These notifications can only be sent to users who have subscribed for these notifications. As these notifications are pushed to subscriber’s browser, subscribers don’t have to be present on your website to receive these notifications. Users can subscribe and receive these notifications on mobile, desktop and tablet.

Developers or Marketers can send these notifications at any time. In case of mobile, these notifications will appear on the notification tray, just like any other notification. In case of Desktop, these notifications appear right next to the task bar.

As Notifications are clickable messages, they can do a lot of things; for instance, display the latest Cricket Match Score, or get user to take a specific action, such as downloading a coupon, or remind user about an event, such as a flash sale.

Web Push notifications on mobile look like any other app notification, but they only reach users who have subscribed to your notifications on their mobile browser. Currently, only Chrome and Firefox on Android OS support web push notifications. These are yet to be supported to iOS.

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

Which browsers support web push notifications ?

DEVICE	OS	BROWSER
Mobile	Android iOS	Chrome 42+, Firefox 48+ NOTHING
Desktop	Windows Ubuntu (Linux) Mac OS	Chrome ( 42+) Firefox ( 44+) Safari ( 9.3, 10) Edge (Latest)
Tablet	Android/Windows iOS	Chrome 42+, Firefox 48+ NOTHING

Getting started with iZooto takes less than 5 minutes

Get Started For Free

Why are they used?

Web Push notifications like app notification facilitate seamless flow of information. To receive these notifications, users are not required to download any new app. All the users need to do is to opt in for these notifications.

   - Sports scores and news right on their lock screen

   - Utility messages like traffic, weather and ski snow reports

   - Flight checkin, change, and connection information

   - Sales Alerts, New Coupons, and Product Updates.

For publishers (and bloggers), web push notifications is a great way to communicate directly with their users. Web Push Notifications are better than the existing push communication channels such as email or SMS because:

   - They are not impacted by ad blockers

   - They are not blocked by spam filters

   - They are not lost inside already crowded inbox

   - Click-through rates for web push can be 10X of email.

They can also remind users to use an app, whether the app is open or not. By adding Call To Actions, they can also be used to drive specific actions, such as:

   - Driving repeat traffic / sharing on social media

   - Promoting products or offers to increase sales

   - Enhancing user experience with timely updates

   - Converting web traffic into loyal subscribers

   - Sending transactional communication swiftly

History


May 2010	Google released its own service, Google Cloud to Device Messaging (C2DM).
May 2013	Google introduces “rich notifications”. Rich notifications can contain images, as well as action buttons. Action buttons let users take immediate action from a notification. For example, the user can play a song, open the app, or see more information.
September 2014	Apple added interactive buttons. These buttons allow users to send a response right away to the app publisher. Shortly after, Apple extended push notifications to the Apple Watch.
April 2015	Chrome introduces Service Workers and Custom Notification Buttons with Chrome 48.
Jan 2016	Firefox rolls out web push support with Firefox 44 for Desktop.
Mar 2016	Chrome rolls out Declarative Payload with Chrome 50.
May 2016	Microsoft Edge Releases support Service Workers and web notifications.
June 2016	Chrome extends VAPID support with Chrome 52.
Aug 2016	Firefox extends web push API support for mobile with Firefox 48.

How do push notifications work?

There are three factors 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 users Google Cloud Messaging ( and now Firebase Cloud Messaging ), Safari users Apple Push Notification Service ( APNS ) and Firefox users

2. Service Worker Registration: Developer must register the service worker on the browser

3. User’s Subscription ID: Subscriber ID is generated when a user opts in to receive notifications from a specific website

4. (Optional) SDK (OS client library Software Development Kit): This is code installed in an app that enables extended segmentation and analytics capabilities

Adding to a Website / Web App

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 add SDK provided by push notification vendor to take care of the above two steps. 4. Website owners can push notifications to their subscribers by executing APIs provided by browser push system. Typically this can be done through the interface exposed by notification vendors.

User Subscription and Activation

1. 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.

2. A unique registration key is generated by browser for every user who subscribes to notification.

3. Notification service provider stores the keys at their end along with any additional data points to identify subscribers uniquely.

Sending Notifications

The process of sending notifications follows a 3-step approach.

1. What" You can define the notification content using either an interface or APIs exposed by the service provider.

2. When: You may choose to send the notification immediately, basis action/trigger or at a scheduled time.

3. Whom: You can define the audience to whom you would want to send 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.

Push notifications seamlessly with iZooto on Chrome, Firefox and Safari

Start Now

Web Push notifications can be targeted 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 their usage pattern ( events and properties ) and used to create powerful audience segments. Marketers / developers would need a interface for writing messages, selecting the target audience and pushing or scheduling notifications.

Publishers 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

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 3
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 avaiable in the notification tray
Two way messaging support	Upcoming Feature in Chrome	Upcoming Feature in Chrome

CHAT WITH US