Notifications API: Advanced Progressive Web Apps – Push Notifications Under Control – Part 1

For sure, Progressive Web Apps (PWA) are one of the hottest topics on the web today. A PWA should feel like a real app, including the ability to show push notifications. In this blog series, you will learn how to implement push messaging in your PWA or website using the Push API, including a look at auxiliary libraries and third-party services. As a part of Google’s Project Fugu, push notifications will get even better thanks to the advent of the Badging API and Notification Triggers.

In diesem Artikel:

Notifications API: Advanced Progressive Web Apps – Push Notifications Under Control – Part 1
Christian Liebel ist Consultant bei Thinktecture. Sein Fokus liegt auf Webstandards und Progressive Web Apps. Er vertritt Thinktecture beim W3C.

Article Series

  1. Notifications API ⬅
  2. Push API
  3. HTTP Web Push
  4. Additional Approaches

The PWA "Uber Pattern"

Progressive Web Apps are typically defined by a stack of ten different characteristics.

So web apps have to satisfy all of them to experience a warm welcome to the PWA family.

Characteristic
Description
Responsive
Adopt screen sizes of the devices running the application, so it will work properly on smartphones, tablets, desktops, and so on
Linkable
Share the URL of the PWA that could even include state information, so everybody will see the same state of the application using the shared link
Discoverable
PWAs can be distinguished from normal websites by their web manifest
Installable
They can be installed on your devices home screen like app-store-apps or on your desktop device where you can find them along you other installed common applications
App-Like
Navigation structures like other (native) applications should be provided
Connectivity Independent
The application has to work properly, even if the device running it is offline
Fresh
They should be always up to date
Safe
HTTPS is a must for communication
Re-engageable
PWAs should be able to get back the attention of their users with the help of push notifications
Progressive
Older browsers like Internet Explorer 11 should be targetable, even if most of the features mentioned are not supported

Some characteristics like „Responsive“ and „Safe“ are/should be mandatory for all kinds of modern web-applications, anyway.

A PWA demo is available at https://pwa.liebel.io. Feel free to check it out.

Push Notifications

Push notifications are an implementation of the so called „Hollywood Principle“.

This term comes from a time when a lot of young actors wanted to be actors in Hollywood and reached out to the production companies regularly asking if they are accepted. The companies typically replied with the „Hollywood Principle“:

That saved them a lot of incoming questions and freed time to manage other tasks.

We want to proactively inform our users that something has happened. Imagine for example you would have to open your Messaging App and hit refresh or update every ten seconds to see if somebody sent you a new message.

A PWA has to be re-engageable

The mission of push notifications is to get the user back to use your application. For sure, you are familiar with notifications sent to your mobile device from social apps like WhatsApp, Twitter, Facebook, and so on. These messages are the first and nearly most crucial channel for communication used by apps and aim to get you back to the corresponding one.

Numbers are saying that the average of apps, e.g., installed on mobile devices, are still growing and are trending to leave double-digit number range. That way, you’ll help your application to stay on top of the user’s mind.

How to handle PWA Push Notifications

In the PWA universe push notifications are implemented using three different specifications.

  • Notifications API
  • Push API
  • HTTP Web Push

    Notifications API and Push API are two different things which should be noted by now.

Later on in this blog series we will cover how push on iOS can work, since there are some limitations using Mobile Safari. This will be followed by insights about Project Fugu, which is an initiative lead by Google, Intel and Microsoft to further improve the experience of notifications. To finish this series, Runtime Push will be dealt with.

As additional source of information, you can checkout the corresponding repository on Github from International JavaScript Conference 2019 in Munich and play around with the demo branches.

How to setup the Notifications API

First of all, let’s see which browsers and versions support the Notifications API.

You can take a closer look at the compatibility table at caniuse.com, too.

The Notifications API allows you to show notifications during runtime. As long as the application is open, it can show a notification banner. Since these messages live outside the viewport of the browser-tab of their application, they can be displayed regardless of the user’s active application or current tab.

Be nice, ask for the users permission

As in any other case of creating applications, software should be polite and friendly. It is mandatory to ask end-users for permission to get in touch with them using push notifications and not disturbing them without permission.

You have to request the permission first:

				
					await Notification.requestPermission();

				
			

The request might be intercepted by Chrome and Firefox in nearby releases, except the permission is requested as an result of an user interaction, like a „subscribe for notifications“ button. In the last case the corresponding permission request dialog will appear.

With the beginning of 2020 it could have been helpful and even more polite to think about implementing a double permission request. With the upcoming releases of Chrome version 80 (link to article) and Firefox version 70 (link to article) it will be close to mandatory to perform a double opt in process for push notifications to prevent your application from being de facto locked out from sending push notifications.

The move of Chrome and Firefox will help to prevent users from being bugged with notifications they can’t relate to a specific module of your application. By following their suggested process you will have the chance to introduce why and what kind of notification you want to send. Doing so should be in your interest, since telling the benefits and backgrounds brings up way more acceptance for notifications instead of just showing the standard permission request used by nearly every web application.

The following snippet shows how to process a permission request using the API, followed by sending a notification as soon as the permission was granted.

				
					async function showNotification() {
	const result = await Notification.requestPermission();
	if (result === 'granted') {
		const noti = new Notification('Hello!', {
			body: 'It’s me.',
			icon: 'mario.png'
		});
		noti.onclick = () => alert('clicked');
	}
}
showNotification();
				
			

As you can see, this is an asynchronous function to make the code a bit more handy and to call it directly in a potential following next step. Inside the method we are calling requestPermission() to show the request notification banner. If we are granted to send notifications, we can create one, which is pretty simple using the constructor of Notification. You can pass parameters like a title or a configuration object containing options for the notification to be created. Important: By calling the constructor, the notifications is shown immediately. Also it is possible to subscribe to the notifications events like onClick() and to make use of them.

Customizing PWA push notifications for your needs

In most cases, Applications should have a customized appearance to attract users and to step out of the row of standard applications. To handle this need, you can make use of the properties provided by the APIs Notification class. Please have in mind, that platform support may vary.

  • Title
  • Text
  • Icon/Image
  • Vibration pattern
  • Action Buttons
  • Arbitrary structured data

To get more details, like available event handlers and which parameters are supported on which platform, please have a look at MDN.

Choose a push notification type

What we just created (and maybe tried out) is a so called non-persistent notification, which has been sent via the web application itself and will close automatically.

As you maybe experienced while using apps, there is a second type of notifications. Apps like messengers (WhatsApp for example) are able to send notifications to their users, even if the app is not open. These persistent notifications are created by a service worker, sent in via the so called Push API. Those notifications stay in the notification center and don’t disappear automatically.

  • Non-persistent: Sent via a web application (automatically close)
  • Persistent: Sent via Service Worker/Push API (stay in notification center)

The persistence of notifications is an important part of the communication flow with your users, so make your choice having your use case in mind.

Conclusion

Notifications are a great way to re-engage your users. In the next part of this blog post series, we’ll have a look at the Push API that perfectly teams up with the Notifications API. So sign up for our monthly newsletter to make sure not to miss it.

Kostenloser
Newsletter

Aktuelle Artikel, Screencasts, Webinare und Interviews unserer Experten für Sie

Verpassen Sie keine Inhalte zu Angular, .NET Core, Blazor, Azure und Kubernetes und melden Sie sich zu unserem kostenlosen monatlichen Dev-Newsletter an.

Diese Artikel könnten Sie interessieren
Project Fugu
Dark Mode Support – Real-World PWA: The Making Of Paint.Js.Org – Part 5

Dark Mode Support – Real-World PWA: The Making Of Paint.Js.Org – Part 5

In part five of the series about the making of the web-based Microsoft Paint clone paint.js.org, I want to show how to implement support for dark mode in your web applications.
20.05.2021
Project Fugu
Accessing Files & File Handler – Real-World PWA: The Making Of Paint.Js.Org – Part 4

Accessing Files & File Handler – Real-World PWA: The Making Of Paint.Js.Org – Part 4

In this fourth part of the series about the Microsoft Paint remake on paint.js.org, I want to demonstrate how you can save your drawings to your local disk, read them back later and how to add your web app as a handler for certain file extensions.
12.05.2021
Project Fugu
Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

In part three of the series about the making of the web-based Microsoft Paint clone paint.js.org, I want to show how you can copy drawings from the Paint clone to other applications and paste them back.
27.04.2021
Project Fugu
Canvas & Input – Real-World PWA: The Making Of Paint.Js.Org – Part 2

Canvas & Input – Real-World PWA: The Making Of Paint.Js.Org – Part 2

After introducing into the project about the web-based Microsoft Paint clone in the first part of this series and talking about the choice of Web Components and the architecture of paint.js.org, I now want to demonstrate how I implemented the drawing functionality.
15.04.2021
Project Fugu
Overview, Web Components & Architecture – Real-World PWA: The Making Of Paint.Js.Org – Part 1

Overview, Web Components & Architecture – Real-World PWA: The Making Of Paint.Js.Org – Part 1

Progressive Web Apps and the new powerful web APIs provided by Project Fugu allow developers to implement desktop-class productivity apps using web technologies. In this six-part article series, Christian Liebel shows you the critical parts of how paint.js.org was made, a web-based clone of the productivity app dinosaur Microsoft Paint. In this first article, Christian gives you an overview of the project, explains the choice of Web Components, and discusses the basic app architecture of the web-based Microsoft Paint clone.
07.04.2021
Angular
From an Angular Web App to a Hybrid App with Capacitor and Ionic Framework

From an Angular Web App to a Hybrid App with Capacitor and Ionic Framework

Creating mobile and desktop applications is a complicated task. Different operating systems require us to have in-depth knowledge of multiple platforms. The web solves most of the problems for us by providing a single platform that runs everywhere - supported by different operating systems and browser vendors. Frameworks like Angular bring the power to write business applications for the web and make a once written application available to everyone.
10.03.2021