Anfang 2015 haben wir Push-Nachrichten und -Benachrichtigungen in Chrome für Android und Desktop-Computer eingeführt. Das war ein großer Fortschritt im Web. Auch wenn der Browser geschlossen war, konnten Nutzer noch intensiver mit dem Web interagieren.
Das ist zwar toll, dass Sie diese Nachrichten senden können, aber Sie konnten damit lediglich darauf klicken und eine Seite öffnen oder sie ganz schließen.
Wenn Sie sich die Benachrichtigungen ansehen, die Apps auf mobilen Plattformen wie iOS und Android nativ bereitgestellt werden, kann der Entwickler damit jeweils Kontextaktionen definieren, die der Nutzer aufrufen und mit denen er interagieren kann. In Chrome 48 haben wir eine ähnliche Funktion wie Webbenachrichtigungen auf dem Computer und in Chrome für Android hinzugefügt.
Das Hinzufügen der API ist ziemlich einfach. Sie müssen nur ein Array mit Aktionen erstellen und sie dem NotificationOptions-Objekt hinzufügen, wenn Sie showNotification über eine ServiceWorker-Registrierung aufrufen (entweder direkt in 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. Wenn Sie wissen möchten, was die Plattform unterstützt, prüfen Sie Notification.maxActions. In den folgenden Beispielen gehen wir davon aus, 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, der Aktion direkt Symbole hinzuzufügen. Sie können jedoch Emojis und den erweiterten Unicode-Zeichensatz verwenden, um Ihren Benachrichtigungsschaltflächen mehr Kontext hinzuzufügen.
Beispiel:
self.registration.showNotification("New message from Alice", {
actions: [
{action: 'like', title: '👍Like'},
{action: 'reply', title: '⤻ Reply'}]
});
Nachdem du jetzt eine Benachrichtigung erstellt und sie gestaltet hast 😻, kann der Nutzer zu einem späteren Zeitpunkt mit der Benachrichtigung interagieren. Interaktionen mit der Benachrichtigung erfolgen alle derzeit (ab Chrome 48) über das notificationclick-Ereignis, das in Ihrem Service Worker registriert ist. Es kann sich dabei um einen allgemeinen Klick auf die Benachrichtigung oder um ein spezielles Tippen auf eine der Aktionsschaltflächen handeln. In Zukunft kannst du auch auf das Ereignisnotificationclosereagieren.
Wenn Sie herausfinden möchten, welche Aktion der Nutzer ausgeführt hat, müssen Sie sich das Attribut action des Ereignisses ansehen. Dann können Sie entweder eine neue Seite öffnen, auf der der Nutzer eine Aktion ausführen kann, oder die Aufgabe im Hintergrund ausfü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 durch die Aktionen kein neues Fenster geöffnet werden muss. Sie können allgemeine Anwendungsinteraktionen ausführen, ohne eine Benutzeroberfläche zu erstellen. Ein Nutzer kann beispielsweise einen Social-Media-Beitrag mit „Mag ich“ bewerten oder löschen, der die Aktion für die lokalen Daten des Nutzers ausführen und ihn dann mit der Cloud synchronisieren würde, ohne eine Benutzeroberfläche zu öffnen. Es wird jedoch empfohlen, die Datenänderung in geöffneten Fenstern zu senden, damit die Benutzeroberfläche aktualisiert werden kann. Bei einer Aktion, die eine Nutzerinteraktion erfordert, wird ein Fenster geöffnet, in dem der Nutzer antworten kann.
Da Plattformen nicht die gleiche Anzahl von Aktionen oder in einigen Fällen überhaupt keine Schaltflächen für Benachrichtigungsaktionen unterstützen können, müssen Sie immer einen sinnvollen Fallback auf eine Aufgabe bereitstellen, der dem Nutzer entspricht, wenn er nur auf die Benachrichtigung klicken würde.
Wenn Sie dies heute in Aktion sehen möchten, sehen Sie sich Peter Beverloos Notification Test Harness an und lesen Sie die Benachrichtigungsspezifikation oder folgen Sie den aktualisierten Spezifikationen.