What are web push notifications

Introduction

Web push notifications are notifications that you receive in your desktop browser or mobile browser. They are delivered from the server to the user even when the user is not on your website and sometimes when the browser is not open.
Web push notifications are easily set up in your website. A mobile app is not needed to receive any notifications.

Anatomy of web push notifications

Web push notifications contains the following elements:

  • Title: Subject of the message. It catches the attention of the user. Ex, Buy 1 Get 1 Free.
  • Content: Body of the message. It should be short and direct. Character count varies between browsers.
  • Domain URL: The domain which has sent the notification.
  • Notification Icon: You can add an icon to your notification. This can be the website logo.
  • Browser Icon: The logo of the browser rendering the notification.

Note: Web push notifications vary in appearance by operating system and browser.

How web push notifications works

Any website can send web push notifications after installing Javascript code to enable them.
Users have to opt-in to receive push notifications before they start receiving them. As part of the opt-in process, the browser displays a built-in prompt to ask the users permissions. This a browser-based opt-in prompt.
Website can also show a soft-ask opt-in prompt implemented with HTML/CSS/Javascript. This is a strategy for securing an opt-in other than than just showing the browser-based opt-in prompt without any additional context.
When the users indicate to receive notifications through the soft-ask opt-in prompt, then the browser-based opt-in prompt is displayed. Once the users are subscribed using the browser-based opt-in prompt, their subscription information is stored, and then they can start receiving notifications.
The web push notification is sent to users (reference by their subscription information) through an API call to a respective browser cloud manager – like GCM, APNs, etc. The cloud manager validates and delivers the message to the right browser.
Once the browsers come online, the push service delivers the message and the browser displays the message.

Browser support

Chrome, Firefox, Opera, Safari and Edge currently support web push notifications. Supported browsers vary by vendor.
Notifications vary in appearance between browsers and operating systems. Some notifications might use the native notification centers.

Note: Not every mobile device can receive web push notifications. Apple mobile devices (iOS) do not currently support mobile web push notifications. So, users using Chrome, Firefox, Opera, Safari and Edge on an iPhone or iPad cannot receive web push notifications.

How to implement web push notifications

You need to use a third-party service such as Webpushify.
The implementation steps are:

  • Create an account in Webpushify
  • Register your domain in Webpushify console
  • Install a JavaScript SDK (code snippet)
  • Website owners can start by registering service workers for Chrome, Firefox, Opera and Edge browsers
  • Website owners must generate certificates for Safari browsers.
  • Start sending notifications using Webpushify console

Author: Webpushify