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 anzeigen, indem sie die Web Notifications API Diese Funktion wird häufig mit den Push API, um den Nutzer über zeitkritische Informationen zu informieren, z. B. als Eilmeldungen oder empfangene Nachrichten. Benachrichtigungen werden angezeigt, indem JavaScript auf der das Gerät der Nutzenden.

Das Problem mit der Push API ist, dass sie zum Auslösen von Benachrichtigungen nicht zuverlässig ist. Dies muss sein. wenn eine bestimmte Bedingung erfüllt ist, z. B. Zeit oder Ort. Ein Beispiel für eine zeitbasierte Bedingung ist eine Kalenderbenachrichtigung, die Sie an ein wichtiges Meeting mit Ihrem Chef 14:00 Uhr Ein Beispiel für eine standortbasierte Bedingung ist eine Benachrichtigung, die dich daran erinnert, Milch zu kaufen. wenn Sie sich in der Nähe Ihres Supermarkts befinden. Netzwerkkonnektivität oder Energiesparmodus Funktionen wie dem Stromsparmodus die Zustellung von Push-Benachrichtigungen verzögern.

Benachrichtigungstrigger lösen dieses Problem, da Sie Benachrichtigungen so planen können, im Voraus, damit das Betriebssystem die Benachrichtigung zum richtigen Zeitpunkt auch wenn keine Netzwerkverbindung besteht oder das Gerät sich im Energiesparmodus befindet.

Anwendungsfälle

Kalenderanwendungen können zeitbasierte Benachrichtigungstrigger verwenden, um Nutzer an bevorstehende Meetings abhalten. Das standardmäßige Benachrichtigungsschema für eine Kalender-App könnte sein, eine erste Warnmeldung anzuzeigen. eine Stunde vor einer Besprechung und dann eine weitere dringendere Benachrichtigung fünf Minuten vorher.

Ein Fernsehsender kann Nutzende daran erinnern, dass ihre Lieblings-TV-Sendung gleich beginnt, oder eine Live-Konferenz. den Stream gleich beginnt.

Websites für Zeitzonen-Conversions können zeitbasierte Trigger für Benachrichtigungen verwenden, damit Nutzer Termine für diese Art von Conversion planen können. Alarme für Telefonkonferenzen oder Videoanrufe.

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 die 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 der showTrigger-Property:

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 showTrigger-Bedingungseigenschaft mit einem TimestampTrigger-Objekt als Wert an die options-Objekt der Benachrichtigung.

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

Um geplante Benachrichtigungen abzubrechen, fordern Sie zunächst eine Liste aller Benachrichtigungen an, die mit einer bestimmten über ServiceWorkerRegistration.getNotifications() taggen. Sie müssen die Das Flag includeTriggered für geplante Benachrichtigungen, die in die Liste aufgenommen werden sollen:

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. Zu Beginn zur Fehlerbehebung klicken Sie auf Aufzeichnung von Ereignissen starten. oder Strg + E bzw. Befehlstaste + E auf einem Mac. Einträge in Chrome-Entwicklertools alle drei Tage lang alle Benachrichtigungsereignisse, einschließlich geplanter, angezeigter und geschlossener Benachrichtigungen, auch wenn die Entwicklertools geschlossen sind.

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Demo

In der Demo sehen Sie Benachrichtigungstrigger in Aktion. Damit können Sie Benachrichtigungen erhalten, geplante Benachrichtigungen auflisten und abbrechen. Der Quellcode ist verfügbar auf Störung.

</ph>

Sicherheit und Berechtigungen

Das Chrome-Team hat die Notification Triggers API gemäß den Grundprinzipien entwickelt und implementiert. wie unter Zugriff auf leistungsstarke Webplattform-Funktionen steuern beschrieben, einschließlich Transparenz und Ergonomie. Da für diese API Service Worker erforderlich sind, ist auch ein in einem sicheren Kontext. 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 impliziert, dass alle erforderliche Daten werden im selben Kontext gespeichert und automatisch gelöscht, 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 Worker in Chrome installiert werden, damit diese API nicht verwendet wird. Benachrichtigungen können für die Website immer vom Nutzer in den Website-Einstellungen deaktiviert werden.

Transparenz

Im Gegensatz zur Push API ist diese API nicht vom Netzwerk abhängig, was geplante Benachrichtigungen impliziert. alle erforderlichen Daten vorab benötigen, einschließlich Bildressourcen, auf die in badge, icon und image-Attribute. Das bedeutet, dass der Entwickler die Anzeige einer geplanten Benachrichtigung nicht beobachten kann. und beinhaltet nicht, den Service Worker erst zu aktivieren, wenn der Nutzer mit der Benachrichtigung interagiert. Daher ist derzeit keine bekannt, wie der Entwickler Informationen über den Nutzer erhalten kann. mit potenziell in den Datenschutz gefährdenden Ansätzen wie der Suche nach IP-Adressen. Bei diesem Design ermöglicht es der Funktion, optional die vom Betriebssystem bereitgestellten Planungsmechanismen zu nutzen wie AlarmManager von Android, wodurch der Akku geschont wird.

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 Umsetzung Ihrer Idee benötigen? Fragen oder Kommentare zur Sicherheit haben Modell? Reichen Sie ein Spezifikationsproblem im GitHub-Repository für Benachrichtigungstrigger ein oder fügen Sie Ihre Gedanken hinzu: ein Problem besteht.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab? Melde einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, einfache Anweisungen zur Reproduktion und setzen Sie die Komponenten auf UI>Notifications. Glitch funktioniert super um Fehler schnell und einfach zu reproduzieren.

Möchten Sie die API verwenden?

Möchten Sie Benachrichtigungstrigger auf Ihrer Website verwenden? Ihre öffentliche Unterstützung hilft uns, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen. Tweet senden an @ChromiumDev mit dem Hashtag #NotificationTriggers und teilen Sie uns mit, wo und wie Sie sie nutzen.

Hilfreiche Links

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

Danksagungen

Benachrichtigungstrigger wurden von Richard Knoll implementiert und dem Erklärvideo von Peter Beverloo, von Richard. Die folgenden Personen haben den Artikel gelesen: Joe Medley, Pete LePage und Richard und Peter. Hero-Image von Lukas Blazek auf Unsplash.