Giter Club home page Giter Club logo

notification-triggers's Introduction

Notification Triggers

Written: 2019-01-28
Updated: 2019-02-11

Web developers have the ability to display notifications using the Notifications API. This ability is often used in collaboration with the Push API to inform the user of time-sensitive information, such as a breaking news article or a received message. Notifications are then shown by allowing JavaScript code to run on the user's device.

Notification Triggers are a mechanism for preparing notifications that are to be shown when certain conditions are met. The trigger could be time-based, location-based or otherwise—for this explainer, we'll focus on time-based triggers.

This makes it possible to prepare notifications to be displayed at a particular time without involving the server, and also improves reliability by removing the dependency on network connectivity. This can be essential for the user experience of certain types of web applications, for example calendars.

Why do we care?

  • The Push API is not reliable for triggering notifications which must be shown at a particular time. The ability to receive messages depends on the device's connectivity, and features such as deep sleep may further delay delivery. An example where this is important are notifications reminding you of a 5 AM departure time to the airport.
  • Unlike usage of the Push API, having notifications be prepared in advance helps browsers to avoid the cost of starting a Service Worker. Particularly on mobile devices, the impact of this can be significant.
  • Not starting the Service Worker for prepared notifications has a privacy-preserving effect: the user's IP address won't be shared with the server by removing the need for network requests, reducing IP-to-location tracking.

Goals

  • Make it possible to prepare notifications that should be shown in the future by introducing time-based triggers.
  • Create a mechanism for defining a trigger that works for the Notifications API, but can be extended to other APIs.

Non-goals

  • Define a comprehensive set of possible triggers.

Example code

Please see this separate document for the proposed WebIDL additions.

Scheduling a reminder ten minutes before an appointment

async function createAppointment(tag, title, timestamp) {
  // .. create the appointment in application-level code ..

  // Schedule a reminder to be shown to the user:
  await swRegistration.showNotification(title, {
    tag, body: 'Your appointment is due in ten minutes!',
    showTrigger: new TimestampTrigger(timestamp - TEN_MINUTES)
  });
}

Canceling a previously scheduled reminder

async function cancelAppointment(tag) {
  const notifications = await swRegistration.getNotifications({
    tag, includeTriggered: true
  });

  if (notifications && notifications.length >= 1)
    notifications[0].close();
}

Design decision

Using showNotification() and getNotifications()

The Notification API extends the ServiceWorkerRegistration interface with two methods: showNotification and getNotifications. Particularly the former implies that something is going to happen now, which could lead to confusion.

Today our proposal builds on top of these APIs for simplicity, as can be seen in the WebIDL proposal. An alternative would be to introduce new methods. These methods would likely share prototypes, interaction models and underlying algorithms, so the added value of doing this is unclear.

Triggers or a deliveryTime property?

The introduction of the concept of Triggers makes this API easily extensible without changes. It also enables us to use the same concept for other APIs that would benefit of a delayed trigger point. In the case of time-based triggers we already identified at least one other type that triggers based on the local timezone of the device. This would allow certain use cases like alarm clocks and are easy to define as a new trigger type. Using a deliveryTime property would make adding use cases like this more confusing.

Involving or excluding the Service Worker?

By excluding the Service Worker from the triggering part we can leverage optimizations on platforms like macOS, where we could use native APIs to delay showing the notifications, or on Android using the native task scheduling to reduce performance impact on the system. It is also reduces the chances of user tracking by not allowing network requests. The downside of this decision is that developers have to decide beforehand what content to show to the user. However, as this API is aimed at the offline experience, they would have to do this anyway because there there might not be an active network connection after defining the Notification.

References and acknowledgements

Many thanks to @rknoll for the initial idea, and @jakearchibald for their ideas, input and discussion.

notification-triggers's People

Contributors

beverloo avatar rknoll avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.