This content originally appeared on web.dev and was authored by Thomas Steiner
The development of 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 86, the Notification Triggers API will be available as an origin trial in Chrome. The origin trial is expected to end in Chrome 88 (February 24, 2021).
An earlier origin trial for the feature, which gave developers a first chance to try out the proposed API, ran from Chrome 80 to 83. You can read the summary of the feedback obtained so far.
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.
Register for the origin trial
- Request a token for your origin.
- 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-TrialHTTP header. The resulting response header should look something like:
Origin-Trial: TOKEN_GOES_HERE
- Add an
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 
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.
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.
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
- Public explainer
- Notification Triggers demo | Notification Triggers demo source
- Tracking bug
- ChromeStatus.com entry
- Blink Component:
UI>Notifications
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.
This content originally appeared on web.dev and was authored by Thomas Steiner
Thomas Steiner | Sciencx (2019-10-24T00:00:00+00:00) Notification Triggers. Retrieved from https://www.scien.cx/2019/10/24/notification-triggers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.