Notification Triggers API

Mit Benachrichtigungstriggern können Sie lokale Benachrichtigungen planen, für die keine Netzwerkverbindung erforderlich ist. Sie eignen sich daher ideal für Anwendungsfälle wie Kalender-Apps.

Thomas Steiner

Was sind Auslöser für Benachrichtigungen?

Webentwickler können Benachrichtigungen mit der Web Notifications API anzeigen. Diese Funktion wird häufig mit der Push API verwendet, um Nutzer über zeitkritische Informationen wie aktuelle Nachrichten oder empfangene Nachrichten zu informieren. Benachrichtigungen werden angezeigt, indem JavaScript auf dem Gerät des Nutzers ausgeführt wird.

Das Problem mit der Push API ist, dass sie nicht zuverlässig für das Auslösen von Benachrichtigungen ist, die angezeigt werden müssen, wenn eine bestimmte Bedingung wie Uhrzeit oder Standort erfüllt ist. Ein Beispiel für eine zeitbasierte Bedingung ist eine Kalenderbenachrichtigung, die Sie an ein wichtiges Meeting mit Ihrem Chef um 14:00 Uhr erinnert. Ein Beispiel für eine standortbasierte Bedingung ist eine Benachrichtigung, die Sie daran erinnert, Milch zu kaufen, wenn Sie sich in der Nähe Ihres Lebensmittelgeschäfts befinden. Netzwerkverbindungen oder Akkusparfunktionen wie der Ruhemodus können die Zustellung von Push-Benachrichtigungen verzögern.

Mit Benachrichtigungstriggern können Sie Benachrichtigungen mit ihren Auslösebedingungen im Voraus planen, damit das Betriebssystem die Benachrichtigung zur richtigen Zeit sendet, auch wenn keine Netzwerkverbindung besteht oder sich das Gerät im Energiesparmodus befindet.

Anwendungsfälle

Kalenderanwendungen können zeitbasierte Benachrichtigungsauslöser verwenden, um Nutzer an bevorstehende Besprechungen zu erinnern. Das standardmäßige Benachrichtigungsschema für eine Kalender-App könnte sein, eine Stunde vor einer Besprechung eine erste Vorabbenachrichtigung und fünf Minuten vorher eine weitere dringende Benachrichtigung anzuzeigen.

Ein TV-Sender kann Nutzer daran erinnern, dass ihre Lieblingssendung gleich beginnt oder dass der Livestream einer Konferenz gleich beginnt.

Websites zur Zeitzonenkonvertierung können zeitbasierte Benachrichtigungstrigger verwenden, damit Nutzer Wecker für Telefonkonferenzen oder Videoanrufe planen können.

Aktueller Status

Schritt Status
1. Erläuternde Mitteilung erstellen Abschließen
2. Ersten Entwurf der Spezifikation erstellen Nicht gestartet
3. Holen Sie Feedback ein und iterieren Sie das Design. In Bearbeitung
4. Ursprungstest Abgeschlossen
5. Starten Nicht gestartet

Benachrichtigungstrigger verwenden

Über about://flags aktivieren

Wenn Sie die Notification Triggers API lokal ohne Testtoken für den Ursprung testen möchten, aktivieren Sie das Flag #enable-experimental-web-platform-features in about://flags.

Funktionserkennung

Sie können prüfen, ob der Browser Benachrichtigungstrigger unterstützt, indem Sie nach der Property showTrigger suchen:

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

Benachrichtigungen planen

Das Planen einer Benachrichtigung ähnelt dem Anzeigen einer normalen Push-Benachrichtigung, mit dem Unterschied, dass Sie eine showTrigger-Bedingungseigenschaft mit einem TimestampTrigger-Objekt als Wert an das options-Objekt der Benachrichtigung übergeben müssen.

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),
  });
};

Geplante Benachrichtigung abbrechen

Wenn Sie geplante Benachrichtigungen abbrechen möchten, fordern Sie zuerst über ServiceWorkerRegistration.getNotifications() eine Liste aller Benachrichtigungen an, die mit einem bestimmten Tag übereinstimmen. Sie müssen das Flag includeTriggered übergeben, damit geplante Benachrichtigungen in die Liste aufgenommen werden:

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

Sie können das Chrome DevTools-Steuerfeld für Benachrichtigungen verwenden, um Benachrichtigungen zu debuggen. Drücken Sie zum Starten des Debuggens Ereignisse erfassenEreignisse erfassen oder Strg + E (Befehlstaste + E auf einem Mac). In den Chrome-Entwicklertools werden alle Benachrichtigungsereignisse, einschließlich geplanter, angezeigter und geschlossener Benachrichtigungen, für drei Tage aufgezeichnet, auch wenn die Entwicklertools geschlossen sind.

Ein geplantes Benachrichtigungsereignis wurde im Bereich „Benachrichtigungen“ der Chrome-Entwicklertools im Anwendungsbereich protokolliert.
Eine geplante Benachrichtigung.
Im Bereich „Benachrichtigungen“ der Chrome DevTools wurde ein angezeigtes Benachrichtigungsereignis protokolliert.
Eine angezeigte Benachrichtigung.

Demo

In der Demo können Sie Benachrichtigungstrigger in Aktion sehen. Dort können Sie Benachrichtigungen planen, geplante Benachrichtigungen auflisten und abbrechen. Der Quellcode ist in Glitch verfügbar.

Screenshot der Demo-Webanwendung für Benachrichtigungsauslöser
Die Demo zu Benachrichtigungstriggern

Sicherheit und Berechtigungen

Das Chrome-Team hat die Notification Triggers API anhand der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, einschließlich Nutzerkontrolle, Transparenz und Ergonomie. Da für diese API Service Worker erforderlich sind, ist auch ein sicherer Kontext erforderlich. Für die Verwendung der API ist dieselbe Berechtigung wie für normale Push-Benachrichtigungen erforderlich.

Nutzersteuerung

Diese API ist nur im Kontext einer ServiceWorkerRegistration verfügbar. Das bedeutet, dass alle erforderlichen Daten im selben Kontext gespeichert und automatisch gelöscht werden, wenn der Service Worker gelöscht wird oder der Nutzer alle Websitedaten für den Ursprung löscht. Durch das Blockieren von Cookies wird außerdem verhindert, dass Service Worker in Chrome installiert werden und diese API somit nicht verwendet wird. Benachrichtigungen können vom Nutzer für die Website immer in den Website-Einstellungen deaktiviert werden.

Transparenz

Im Gegensatz zur Push API ist diese API nicht vom Netzwerk abhängig, d. h., geplante Benachrichtigungen benötigen vorab alle erforderlichen Daten, einschließlich Bildressourcen, auf die durch die Attribute badge, icon und image verwiesen wird. Das bedeutet, dass die Anzeige einer geplanten Benachrichtigung für den Entwickler nicht sichtbar ist und der Dienst-Worker erst dann geweckt wird, wenn der Nutzer mit der Benachrichtigung interagiert. Daher gibt es derzeit keine bekannte Möglichkeit, dass der Entwickler Informationen über den Nutzer durch potenziell datenschutzverletzende Methoden wie die geografische IP-Adressensuche erhalten könnte. Dieses Design ermöglicht es der Funktion auch, optional die vom Betriebssystem bereitgestellten Planungsmechanismen zu nutzen, z. B. AlarmManager von Android, um den Akku zu schonen.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit Benachrichtigungstriggern erfahren.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Implementierung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell? Melden Sie ein Problem mit der Spezifikation im GitHub-Repository für Benachrichtigungstrigger oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem bei der Implementierung?

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation? Melden Sie den Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, fügen Sie eine einfache Anleitung zur Reproduktion hinzu und legen Sie „Components“ auf UI>Notifications fest. Glitch eignet sich hervorragend, um Fehler schnell und einfach zu reproduzieren.

Möchten Sie die API verwenden?

Sie möchten Auslöser für Benachrichtigungen auf Ihrer Website verwenden? Deine öffentliche Unterstützung hilft uns dabei, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es für sie ist, sie zu unterstützen. Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #NotificationTriggers und teilen Sie uns mit, wo und wie Sie ihn verwenden.

Hilfreiche Links

Danksagungen

Benachrichtigungstrigger wurden von Richard Knoll implementiert und die Erläuterung wurde von Peter Beverloo verfasst, mit Beiträgen von Richard. Der Artikel wurde von den folgenden Personen geprüft: Joe Medley, Pete LePage sowie Richard und Peter. Hero-Image von Lukas Blazek auf Unsplash.