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.
Works across Desktop, Tablet and Mobile

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 ()
    Edge (Latest)
  • Tablet
  • Android/Windows
  • iOS
  • Chrome 42+, Firefox 48+
  • NOTHING
Getting started with iZooto takes less than 5 minutes

Why are they used?



push notification preview
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.



push notification preview
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.



push notification preview
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


safari push notification
firefox push notification
chrome push notification


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 Prompt

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.
Sending Push Notifications
Push notifications seamlessly with iZooto on Chrome, Firefox and Safari
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