Anfang 2015 haben wir Push-Messaging und Benachrichtigungen in Chrome für Android und Desktop eingeführt. Das war ein großer Schritt nach vorn im Web. Nutzer konnten sich intensiver mit Inhalten im Web auseinandersetzen, auch wenn der Browser geschlossen war.
Es ist zwar gut, dass Sie diese Nachrichten senden können, aber Sie konnten sie nur anklicken und eine Seite öffnen oder sie ganz schließen.
Bei den Benachrichtigungen, die nativ für Apps auf mobilen Plattformen wie iOS und Android bereitgestellt werden, kann der Entwickler jeweils Kontextaktionen definieren, die der Nutzer aufrufen und mit denen er interagieren kann. In Chrome 48 haben wir eine ähnliche Funktion für Webbenachrichtigungen für Desktop und Chrome für Android hinzugefügt.
Die Ergänzung der API ist ganz einfach. 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 pro Benachrichtigung.
Einige Plattformen unterstützen möglicherweise mehr, andere weniger oder gar keine. Notification.maxActions gibt Aufschluss darüber, was die Plattform unterstützt. 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 noch nicht möglich, dem Vorgang direkt Symbole hinzuzufügen. Sie können aber Emojis und den erweiterten Unicode-Zeichensatz verwenden, um den Benachrichtigungsschaltflächen mehr Kontext zu geben.
Beispiel:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Nachdem Sie eine Benachrichtigung erstellt und sie 😻 gestaltet haben, kann der Nutzer irgendwann in der Zukunft mit ihr interagieren. Interaktionen mit der Benachrichtigung werden derzeit (Stand: Chrome 48) alle über das notificationclick-Ereignis im Service Worker registriert. Dabei kann es sich entweder um einen allgemeinen Klick auf die Benachrichtigung oder um ein bestimmtes Tippen auf eine der Aktionsschaltflächen handeln. Nebenbei bemerkt: In Zukunft können Sie auch auf das Ereignisnotificationcloseantworten.
Um zu verstehen, welche Aktion der Nutzer ausgeführt hat, müssen Sie die Property action des Ereignisses prüfen. Anschließend haben Sie die Möglichkeit, 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);
Das Interessante daran 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 könnte beispielsweise einen Social-Media-Beitrag liken oder löschen. Dadurch würde die Aktion für die lokalen Daten des Nutzers ausgeführt und dann mit der Cloud synchronisiert, ohne dass eine Benutzeroberfläche geöffnet wird. Es empfiehlt sich jedoch, alle geöffneten Fenster über die Datenänderung zu informieren, damit die Benutzeroberfläche aktualisiert werden kann. Bei einer Aktion, die eine Nutzerinteraktion erfordert, würden Sie ein Fenster öffnen, in dem der Nutzer antworten kann.
Da Plattformen nicht dieselbe Anzahl von Aktionen unterstützen oder in einigen Fällen überhaupt keine Benachrichtigungsaktionsschaltflächen unterstützen, 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 ansehen möchten, sehen Sie sich Peter Beverloos Notification Test Harness an und lesen Sie die Benachrichtigungsspezifikation oder folgen Sie der Spezifikation, während sie aktualisiert wird.