Benachrichtigungsaktionen in Chrome 48

Paul Kinlan

Anfang 2015 haben wir Push-Messaging und -Benachrichtigungen in Chrome für Android und Computer eingeführt. Das war ein großer Schritt für das Web. Nutzer können sich auch dann intensiver mit Inhalten im Web beschäftigen, wenn der Browser geschlossen ist.

Es ist zwar toll, dass Sie diese Nachrichten senden können, aber Sie konnten damit nur auf sie klicken und eine Seite öffnen oder sie vollständig schließen.

Bei den Benachrichtigungen, die für Apps auf mobilen Plattformen wie iOS und Android nativ bereitgestellt werden, können Entwickler kontextbezogene Aktionen definieren, die der Nutzer aufrufen und mit denen er interagieren kann. In Chrome 48 haben wir eine ähnliche Funktion für Webbenachrichtigungen auf dem Computer und in Chrome für Android hinzugefügt.

Die API ist recht einfach zu ergänzen. Sie müssen lediglich ein Array von Aktionen erstellen und dem NotificationOptions-Objekt hinzufügen, wenn Sie showNotification über eine ServiceWorker-Registrierung aufrufen (entweder direkt im ServiceWorker oder auf einer Seite über navigator.serviceWorker.ready).

Derzeit unterstützt Chrome nur zwei Aktionen für jede Benachrichtigung. Einige Plattformen unterstützen möglicherweise mehr, andere weniger oder gar keine. Welche Funktionen von der Plattform unterstützt werden, siehst du unter Notification.maxActions. In den folgenden Beispielen wird davon ausgegangen, dass die Plattform zwei Aktionen unterstützt.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Dadurch wird eine einfache Benachrichtigung mit zwei Schaltflächen erstellt. Hinweis: Es ist derzeit nicht möglich, der Aktion direkt Symbole hinzuzufügen. Sie können jedoch Emojis und den erweiterten Unicode-Zeichensatz verwenden, um Ihren Benachrichtigungsschaltflächen mehr Kontext zu verleihen.

Beispiel:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Nachdem Sie eine Benachrichtigung erstellt und ihr ein ansprechendes Design gegeben haben, kann der Nutzer in Zukunft mit der Benachrichtigung interagieren. Interaktionen mit der Benachrichtigung erfolgen derzeit (Stand Chrome 48) über das Ereignis notificationclick, das in Ihrem Service Worker registriert ist. Dabei kann es sich um einen allgemeinen Klick auf die Benachrichtigung oder einen bestimmten Tipp auf eine der Aktionsschaltflächen handeln. Hinweis: In Zukunft können Sie auch auf das Ereignisnotificationclose reagieren.

Um zu erfahren, welche Aktion der Nutzer ausgeführt hat, müssen Sie die Property action für das Ereignis prüfen. Anschließend haben Sie die Wahl, entweder eine neue Seite zu öffnen, auf der der Nutzer eine Aktion ausführen kann, oder die Aufgabe im Hintergrund auszuführen.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

Interessant ist, dass die Aktionen kein neues Fenster öffnen müssen. Sie können allgemeine Anwendungsinteraktionen ausführen, ohne eine Benutzeroberfläche zu erstellen. Ein Nutzer kann beispielsweise einem Beitrag in sozialen Medien ein „Mag ich“ geben oder ihn löschen. Die Aktion wird dann auf den lokalen Daten des Nutzers ausgeführt und anschließend mit der Cloud synchronisiert, ohne dass eine Benutzeroberfläche geöffnet wird. Es empfiehlt sich jedoch, die Datenänderung an alle geöffneten Fenster zu senden, damit die Benutzeroberfläche aktualisiert werden kann. Für eine Aktion, die eine Nutzerinteraktion erfordert, öffnen Sie ein Fenster, in dem der Nutzer antworten kann.

Da nicht alle Plattformen dieselbe Anzahl von Aktionen unterstützen oder in einigen Fällen Schaltflächen für Benachrichtigungsaktionen überhaupt nicht unterstützen können, müssen Sie immer einen sinnvollen Fallback für eine Aufgabe bereitstellen, die der Nutzer ausführen würde, wenn er nur auf die Benachrichtigung klickt.

Wenn Sie sich das heute in Aktion ansehen möchten, sehen Sie sich Peter Beverloo's Notification Test Harness an und lesen Sie die Benachrichtigungsspezifikation oder folgen Sie der Spezifikation bei Updates.