Web Push Notifications: Timely, Relevant, and Precise

If you ask a room of developers what mobile device features are missing from
the web, push notifications are always high on the list.

Web push notifications allow users to opt-in to timely updates from sites
they love and allow you to effectively re-engage them with customized,
relevant content.

The Push API and Notification API open a whole new set of possibilities for
you to re-engage with your users.

Are service workers involved?

Yes. Push is based on service workers because service workers operate in the
background. This means the only time code is run for a push notification (in
other words, the only time the battery is used) is when the user interacts with
a notification by clicking it or closing it. If you're not familiar with them,
check out the service worker introduction. We will use
service worker code in later sections when we show you how to implement pushes
and notifications.

Two technologies

Push and notification use different, but complementary, APIs:
push is
invoked when a server supplies information to a service worker; a
notification
is the action of a service worker or web page script showing information
to a user.

A little notification anatomy

In the next section we're going to throw a bunch of pictures at you, but we
promised code. So, here it is. With a service worker registration you call
showNotification on a registration object.

serviceWorkerRegistration.showNotification(title, options);

The title argument appears as a heading in the notification. The options
argument is an object literal that sets the other properties of a notification.
A typical options object looks something like this:

This code produces a notification like the one in the image. It generally
provides the same capabilities as a native application. Before diving into the
specifics of implementing those capabilities, I'll show you how to use those
capabilities effectively. We'll go on to describe the mechanics of
implementing push notifications, including handling permissions and
subscriptions, sending messages, and responding to them.