Skip to content
Learn Measure Blog Case studies About
Join and donate to πŸ‡ΊπŸ‡¦ DevFest for Ukraine, a charitable tech conference happening June 14–15 supported by Google Developers and Google Cloud.
On this page
  • Are service workers involved?
  • Two technologies
  • A little notification anatomy
  • How can I try it?
  • Home
  • All articles

Web Push Notifications - Timely, relevant, and precise

Push notifications are one of the most valuable capabilities of native apps, and this capability is now available on the web. To get the most out of them, notifications need to be timely, precise, and relevant.

Jun 30, 2016 β€” Updated Sep 20, 2018
Joe Medley
Joe Medley
TwitterGitHub
On this page
  • Are service workers involved?
  • Two technologies
  • A little notification anatomy
  • How can I try it?
Example notification.

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][service-worker-primer]. 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:

{
"body": "Did you make a $1,000,000 purchase at Dr. Evil...",
"icon": "images/ccard.png",
"vibrate": [200, 100, 200, 100, 200, 100, 400],
"tag": "request",
"actions": [
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },
{ "action": "no", "title": "No", "icon": "images/no.png" }
]
}
Example notification.

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.

How can I try it? #

There are several ways you can play with the features before you completely understand how they work, or have to implement them. First, check out our own sample. Also available are Peter Beverloo's Notification Generator and Mozilla's Push Payload Demo.

Unless you're using localhost, the Push API requires HTTPS.
Last updated: Sep 20, 2018 β€” Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.