Notification Triggers API

Mit Benachrichtigungstriggern kannst du lokale Benachrichtigungen planen, die keine Netzwerkverbindung erfordern. Dadurch sind sie ideal für Anwendungsfälle wie Kalender-Apps.

Thomas Steiner

Was sind Benachrichtigungstrigger?

Webentwickler können Benachrichtigungen mithilfe der Web Notifications API anzeigen. Diese Funktion wird häufig zusammen mit der Push API verwendet, um den 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 keine Benachrichtigungen auslöst, die angezeigt werden müssen, wenn eine bestimmte Bedingung wie Zeit oder Ort erfüllt ist. Ein Beispiel für eine zeitbasierte Bedingung ist eine Kalenderbenachrichtigung, die Sie um 14 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 die Nähe Ihres Lebensmittelgeschäfts begeben. Netzwerkkonnektivität oder akkusparende Funktionen wie der Stromsparmodus können die Zustellung von Push-Benachrichtigungen verzögern.

Benachrichtigungstrigger lösen dieses Problem, indem Sie Benachrichtigungen mit ihrer Auslösebedingung im Voraus planen, sodass das Betriebssystem die Benachrichtigung auch dann zum richtigen Zeitpunkt sendet, wenn keine Netzwerkverbindung besteht oder sich das Gerät im Energiesparmodus befindet.

Anwendungsfälle

Kalenderanwendungen können zeitbasierte Benachrichtigungstrigger verwenden, um Nutzer an anstehende Besprechungen zu erinnern. Das Standardbenachrichtigungsschema 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 Fernsehsender kann Nutzer daran erinnern, dass ihre Lieblingsfernsehsendung oder der Livestream einer Konferenz beginnt.

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

Aktueller Status

Auslöser für Benachrichtigungen verwenden

Aktivierung über „about://flags“

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

Funktionserkennung

Wenn Sie herausfinden möchten, ob der Browser Benachrichtigungstrigger unterstützt, prüfen Sie, ob das Attribut showTrigger vorhanden ist:

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 Benachrichtigungen 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. Damit geplante Benachrichtigungen in die Liste aufgenommen werden, 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

Sie können den Benachrichtigungsbereich der Chrome DevTools verwenden, um Fehler in Benachrichtigungen zu beheben. Drücken Sie zum Starten der Fehlerbehebung Aufzeichnung von Ereignissen starten oder Strg + E (Befehlstaste + E auf einem Mac). In den Chrome-Entwicklertools werden alle Benachrichtigungsereignisse, einschließlich geplanter, angezeigter und geschlossener Benachrichtigungen, drei Tage lang aufgezeichnet, selbst wenn die Entwicklertools geschlossen sind.

Demo

Du kannst Benachrichtigungstrigger in der Demo in Aktion sehen. Dort kannst du Benachrichtigungen planen, geplante Benachrichtigungen auflisten und abbrechen. Der Quellcode ist in Glitch verfügbar.

Sicherheit und Berechtigungen

Das Chrome-Team hat die Notification Triggers API gemäß den unter Kontrollieren des Zugriffs auf leistungsstarke Webplattform-Funktionen definierte Grundprinzipien wie Nutzerkontrolle, Transparenz und Ergonomie entwickelt und implementiert. Da für diese API Service Worker erforderlich sind, ist auch ein sicherer Kontext erforderlich. Für die Verwendung der API ist die gleiche Berechtigung wie für normale Push-Benachrichtigungen erforderlich.

Nutzersteuerung

Diese API ist nur im Kontext einer ServiceWorkerRegistration verfügbar. Dies bedeutet, dass alle erforderlichen Daten im selben Kontext gespeichert werden und automatisch gelöscht werden, wenn der Service Worker 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 vom Entwickler nicht beobachtet werden kann und der Service Worker erst dann wieder aktiviert wird, wenn der Nutzer mit der Benachrichtigung interagiert. Aus diesem Grund ist es derzeit nicht bekannt, wie der Entwickler Informationen über den Nutzer durch Methoden erhalten kann, die möglicherweise den Datenschutz verletzen, z. B. die Suche nach der Standortbestimmung anhand der IP-Adresse. Bei diesem Design kann die Funktion auch optional Planungsmechanismen des Betriebssystems wie AlarmManager von Android nutzen, um den Akku zu schonen.

Feedback

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

Erzähl uns etwas über das API-Design

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

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler 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, eine einfache Anleitung für die Reproduktion an und setzen Sie die Komponenten auf UI>Notifications. Glitch eignet sich hervorragend, um Fehler schnell und einfach zu reproduzieren.

Möchten Sie die API verwenden?

Möchten Sie Benachrichtigungstrigger 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. Sende einen Tweet mit dem Hashtag #NotificationTriggers an @ChromiumDev und teile uns mit, wo und wie du ihn verwendest.

Hilfreiche Links

• Öffentliche Erläuterung
• Demo zu Benachrichtigungstriggern | Demoquelle für Benachrichtigungstrigger
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: UI>Notifications

Danksagungen

Die Benachrichtigungstrigger wurden von Richard Knoll und dem erklärenden Autor von Peter Beverloo mit Beiträgen von Richard implementiert. Die folgenden Personen haben den Artikel gelesen: Joe Medley, Pete LePage sowie Richard und Peter. Hero-Image von Lukas Blazek auf Unsplash.