Learn Measure Blog Live About

Notification Triggers

Notification Triggers allows you to schedule local notifications that don't require a network connection, which makes them ideal for use cases like calendar apps.

Updated

The Notification Triggers API, part of Google's capabilities project, is currently in development. This post will be updated as the implementation progresses.

What are Notification Triggers?

Web developers can display notifications using the Web Notifications API. This feature is often used with the Push API to inform the user of time-sensitive information, such as breaking news events or received messages. Notifications are shown by running JavaScript on the user's device.

The problem with the Push API is that it's not reliable for triggering notifications which must be shown when a particular condition, like time or location, is met. An example of a time-based condition is a calendar notification that reminds you of an important meeting with your boss at 2 PM. An example of a location-based condition is a notification that reminds you to buy milk when you enter the vicinity of your grocery store. Network connectivity or battery-preserving features like doze mode can delay the delivery of push based notifications.

Notification triggers solve this problem by letting you schedule notifications with their triggering condition in advance, so that the operating system will deliver the notification at the right time even if there is no network connectivity or the device is in battery saver mode.

For now, Chrome only supports time-based triggers. Additional triggers, such as location-based triggers, may be added in the future based on developer demand.

Use cases

Calendar applications can use time-based notification triggers to remind a user of upcoming meetings. The default notification scheme for a calendar app could be to show a first heads-up notification one hour before a meeting and then another more urgent notification five minutes before.

A TV network might remind users that their favorite TV show is about to start or a conference live stream is about to begin.

Time zone conversion sites can use time-based notification triggers to let their users schedule alarms for telephone conferences or video calls.

Current status

Step Status
1. Create explainer Complete
2. Create initial draft of specification Not started
3. Gather feedback and iterate on design In progress
4. Origin trial In Progress
5. Launch Not started

How to use notification triggers

Enabling via chrome://flags

To experiment with the Notification Triggers API locally, without an origin trial token, enable the #enable-experimental-web-platform-features flag in chrome://flags.

Enabling support during the origin trial phase

Starting in Chrome 80, the Notification Triggers API will be available as an origin trial.

Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.

Once you're registered,

  1. Request a token for your origin.
  2. Add the token to your pages. There are two ways to do that:
    • Add an origin-trial <meta> tag to the head of each page. For example, this may look something like:
      <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
    • If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like:
      Origin-Trial: TOKEN_GOES_HERE

Feature detection

You can find out if the browser supports Notification Triggers by checking for the existence of the showTrigger property:

if ("showTrigger" in Notification.prototype) {
/* Notification Triggers supported */
}

Scheduling a notification

Scheduling a notification is similar to showing a regular push notification, except that you need to pass a showTrigger condition property with a TimestampTrigger object as the value to the notification's options object.

const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: "This notification was scheduled 30 seconds ago",
showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});
};

On desktop, notification triggers fire only if Chrome is running. On Android, they fire regardless.

Canceling a scheduled notification

To cancel scheduled notifications, first request a list of all notifications that match a certain tag through ServiceWorkerRegistration.getNotifications(). Note that you need to pass the includeTriggered flag for scheduled notifications to be included in the list:

const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};

Debugging

You can use the Chrome DevTools Notifications panel to debug notifications. To start debugging, press Start recording events Start recording events or Control+E (Command+E on Mac). Chrome DevTools records all notification events, including scheduled, displayed, and closed notifications, for three days, even when DevTools is closed.

A scheduled notification event was logged to the Notifications pane of Chrome
            DevTools, which is located in the Application panel.
A scheduled notification.
A displayed notification event was logged to the Notifications pane of Chrome
            DevTools.
A displayed notification.

Demo

You can see Notification Triggers in action in the demo, which allows you to schedule notifications, list scheduled notifications, and cancel them. The source code is available on Glitch.

A screenshot of the Notification Triggers demo web app.
The Notification Triggers demo.

Security and permissions

The Chrome team has designed and implemented the Notification Triggers API using the core principles defined in Controlling Access to Powerful Web Platform Features, including user control, transparency, and ergonomics. Because this API requires service workers, it also requires a secure context. Using the API requires the same permission as regular push notifications.

User control

This API is only available in the context of a ServiceWorkerRegistration. This implies that all required data is stored in the same context and is automatically deleted when the service worker is deleted or the user deletes all site data for the origin. Blocking cookies also prevents service workers from being installed in Chrome, and therefore this API from being used. Notifications can always be disabled by the user for the site in site settings.

Transparency

Unlike the Push API, this API does not depend on the network, which implies scheduled notifications need all required data beforehand, including image resources referenced by the badge, icon and image attributes. This means showing a scheduled notification is not observable by the developer and doesn't involve waking up the service worker until the user interacts with the notification. Consequently, there is currently no known way the developer could obtain information about the user through potentially privacy-invading approaches like IP address geolocation lookup. This design also allows the feature to optionally tap into scheduling mechanisms provided by the operating system like Android's AlarmManager, which helps preserve battery.

Feedback

The Chrome team wants to hear about your experiences with Notification Triggers.

Tell us about the API design

Is there something about the API that doesn't work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model? File a spec issue on the Notification Triggers GitHub repo, or add your thoughts to an existing issue.

Problem with the implementation?

Did you find a bug with Chrome's implementation? Or is the implementation different from the spec? File a bug at new.crbug.com. Be sure to include as much detail as you can, simple instructions for reproducing, and set Components to UI>Notifications. Glitch works great for sharing quick and easy bug reproductions.

Planning to use the API?

Planning to use Notification Triggers on your site? Your public support helps us to prioritize features and shows other browser vendors how critical it is to support them. Send a Tweet to @ChromiumDev with #notificationtriggers and let us know where and how you're using it.

Helpful Links

Acknowledgements

Notification Triggers was implemented by Richard Knoll and the explainer written by Peter Beverloo, with contributions from Richard. The following people have reviewed the article: Joe Medley, Pete LePage, as well as Richard and Peter. Hero image by Lukas Blazek on Unsplash.

Last updated: Improve article