Notification Triggers API

Mit Benachrichtigungsauslösern 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 zusammen mit der Push API verwendet, um Nutzer über zeitkritische Informationen wie Eilmeldungen oder empfangene Nachrichten zu informieren. Benachrichtigungen werden durch Ausführen von JavaScript auf dem Gerät des Nutzers angezeigt.

Das Problem mit der Push API besteht darin, dass sie nicht zuverlässig ist, um Benachrichtigungen auszulösen, die unbedingt angezeigt werden müssen, wenn eine bestimmte Bedingung wie Zeit oder Standort erfüllt ist. Ein Beispiel für eine zeitbasierte Bedingung ist eine Kalenderbenachrichtigung, die Sie um 14:00 Uhr an ein wichtiges Meeting mit Ihrem Chef 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 Supermarkts befinden. Netzwerkverbindungen oder akkusparende Funktionen wie der Inaktivmodus können die Zustellung von Push-Benachrichtigungen verzögern.

Benachrichtigungstrigger lösen dieses Problem, da Sie Benachrichtigungen mit der entsprechenden Auslösebedingung im Voraus planen können. Das Betriebssystem liefert die Benachrichtigung dann zur richtigen Zeit aus, 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 Termine zu erinnern. Das Standardbenachrichtigungsschema für eine Kalender-App könnte so aussehen, dass eine erste Benachrichtigung eine Stunde vor einer Besprechung und dann eine weitere dringendere Benachrichtigung fünf Minuten vor der Besprechung angezeigt wird.

Ein TV-Sender kann Nutzer daran erinnern, dass ihre Lieblingsserie oder ein Livestream einer Konferenz bald beginnt.

Auf Websites zur Zeitzonenkonvertierung können zeitbasierte Benachrichtigungstrigger verwendet werden, damit Nutzer Alarme für Telefonkonferenzen oder Videoanrufe planen können.

Aktueller Status

Benachrichtigungstrigger verwenden

Aktivierung über about://flags

Wenn Sie die Notification Triggers API lokal ohne Origin-Trial-Token testen möchten, aktivieren Sie das Flag #enable-experimental-web-platform-features in about://flags.

Funktionserkennung

Sie können herausfinden, ob der Browser Benachrichtigungstrigger unterstützt, indem Sie prüfen, ob die Eigenschaft showTrigger vorhanden ist:

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

Benachrichtigung planen

Das Planen einer Benachrichtigung ähnelt dem Anzeigen einer regulären Push-Benachrichtigung. Der Unterschied besteht darin, dass Sie dem options-Objekt der Benachrichtigung eine showTrigger-Bedingungseigenschaft mit einem TimestampTrigger-Objekt als Wert ü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 einem bestimmten Tag entsprechen. Damit geplante Benachrichtigungen in der Liste enthalten sind, müssen Sie das Flag includeTriggered übergeben:

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

Mit dem Benachrichtigungsbereich der Chrome-Entwicklertools können Sie Benachrichtigungen debuggen. Drücken Sie Ereignisse aufzeichnen oder Strg + E (Befehlstaste + E auf einem Mac), um mit dem Debugging zu beginnen. Chrome-Entwicklertools zeichnen alle Benachrichtigungsereignisse, einschließlich geplanter, angezeigter und geschlossener Benachrichtigungen, für drei Tage auf, auch wenn die Entwicklertools geschlossen sind.

Demo

In der Demo können Sie sehen, wie Benachrichtigungsauslöser funktionieren. Dort können Sie Benachrichtigungen planen, geplante Benachrichtigungen auflisten und sie abbrechen. Der Quellcode ist auf Glitch verfügbar.

Sicherheit und Berechtigungen

Das Chrome-Team hat die Notification Triggers API gemäß den in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Webplattformfunktionen steuern) definierten Grundsätzen entwickelt und implementiert, darunter 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 reguläre Push-Benachrichtigungen erforderlich.

Kontrolle durch Nutzer

Diese API ist nur im Kontext einer ServiceWorkerRegistration verfügbar. Das bedeutet, dass alle erforderlichen Daten im selben Kontext gespeichert werden und automatisch gelöscht werden, wenn der Service Worker gelöscht wird oder der Nutzer alle Websitedaten für den Ursprung löscht. Wenn Sie Cookies blockieren, wird auch verhindert, dass Service Worker in Chrome installiert werden, und somit auch, dass diese API verwendet wird. Benachrichtigungen können vom Nutzer jederzeit in den Websiteeinstellungen deaktiviert werden.

Transparenz

Im Gegensatz zur Push API ist diese API nicht vom Netzwerk abhängig. Das bedeutet, dass für geplante Benachrichtigungen alle erforderlichen Daten im Voraus benötigt werden, einschließlich der Bildressourcen, auf die mit den Attributen badge, icon und image verwiesen wird. Das bedeutet, dass das Anzeigen einer geplanten Benachrichtigung für den Entwickler nicht sichtbar ist und der Service Worker erst aktiviert wird, wenn der Nutzer mit der Benachrichtigung interagiert. Daher gibt es derzeit keine bekannte Möglichkeit, wie der Entwickler Informationen über den Nutzer durch potenziell datenschutzverletzende Methoden wie die Geolocation-Suche nach IP-Adressen erhalten könnte. Dieses Design ermöglicht es der Funktion auch, optional auf Planungsmechanismen des Betriebssystems wie AlarmManager von Android zuzugreifen, was dazu beiträgt, den Akku zu schonen.

Feedback

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

Informationen zum API-Design

Funktioniert etwas an der API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Haben Sie Fragen oder Anmerkungen zum Sicherheitsmodell? Melden Sie ein Spezifikationsproblem im GitHub-Repository für Benachrichtigungstrigger oder fügen Sie einem bestehenden Problem Ihre Gedanken hinzu.

Probleme bei der Implementierung?

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melden Sie einen 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 die Komponenten auf UI>Notifications fest. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen von Fehlern zu teilen.

Sie planen, die API zu verwenden?

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

Hilfreiche Links

• Öffentliche Erläuterung
• Demo zu Auslösern für Benachrichtigungen | Quellcode der Demo zu Auslösern für Benachrichtigungen
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: UI>Notifications

Danksagungen

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