Web Push Notifications (demystified)

Written by on Thursday, October 12th 2017

Web Push Notifications (demystified)
A few days ago, along with the release of our new line of PWA products, we published some new features. Amongst them is the option to now send push notifications to Progressive Web App users . 

Web push notifications : which browsers are compatible?

With the Progressive Web App offers, it's possible to send push notifications, which are received directly in the user's web browser. This feature is supported by the majority of recent web browsers, and the list of them is growing every day. 

The table below gives an overview of the OS/browsers that are able to receive push notifications. In our study, the last stable version of each browser was what we looked at. 

All operating systems (except iOS unfortunately), have a web browser that can receive push notifications, which is encouraging news. As we've already expressed, PWA's are the future of apps. Even Apple looks like it's making an effort to catch up, with their announcement this summer regarding them starting to work on Service Worker usage in Safari. 

Service workers are an essential element that allow PWA's to provide a rich experience. For example, they manage the reception of incoming push notifications in all the browsers listed in the table above. All, except for Safari, which uses a proprietary system that allows notifications to be received in OS X, but not in iOS. The team in charge of Safari development hasn't yet indicated whether the reception of push notifications would be managed by a service worker or not once they are supported. We hope this will be the case, or that at least there will be an alternative available for iOS. 

Prerequesites needed for it to work

If you're curious about how push notifications work, I would suggest you read the How Push Works page in Google's knowledge base. The concept of sending/receiving push notifications is very well explained there. 

In order for push notifications to be received, several conditions must be met. 

From your side, you must establish a connection between your back office and the third party services used for notification distribution. To establish this connection, you have to generate the key API's and/or certificates in order to guarantee authenticity of the exchanges between GoodBarber servers and the notification distribution services. For Chrome, Firefox, and Opera, we use Firebase, which is Google's platform. For Safari, we use APNs, Apple's platform. 

From the final user's side, there isn't much that needs to be done besides visiting the PWA from a browser that's able to receive push notifications (see the table above) and of course, accepting to receive push notifications once on the site. 

Then, from your back office, you can send your notifications. 

Sending and receiving push notifications

From the page Users > Push > Envoyer, you can create and distribute your push notifications. 

- Draft your message
- Select the action that will take place when the notification is opened. In the example in the following screenshot, I'm sending my user directly to the page to reserve a table in my restaurant. 
- Choose the send date of the message, which can be immediate or in the future. You can choose to take the user's time zone into account when notifying him or her. 

This page indicates the number of users (more precisely the number of web browsers) that will receive the notification. 
Web Push Notifications (demystified)

From the user's side, the notification will be displayed on his or her device. The visual elements in the notification are customizable from the page Builder > Resources and Tools > Icons

Amongst the icons, you'll find a notification icon. It should be monochrome on a transparent background. On Android, it is displayed in the phone's status bar when the push notification is received. When you go to the details of the notification, the site logo will appear too. 
Web Push Notifications (demystified)

Web Push Notifications (demystified)
The Progressive Web App allows you to distribute your app in a universal, free channel : the web. Now that they're equipped with push notificationsGoodBarber PWA's allow you to maintain the line of contact with your web users. 



Enter your email address