Mit Push-Benachrichtigungen können Sie Ihren Nutzern eine App-ähnliche Erfahrung bieten und sie über wichtige und zeitnahe Updates wie eingehende Chatnachrichten informieren. Die Benachrichtigungsplattform ist in Browsern relativ neu. Da immer mehr Anwendungsfälle und Anforderungen hinzukommen, werden die APIs für Benachrichtigungen ständig erweitert. Chrome 50 (Beta im März 2016) ist da keine Ausnahme. Es bietet vier neue Funktionen, mit denen Entwickler mehr Kontrolle über Benachrichtigungen haben. Sie haben folgende Möglichkeiten:
- Benachrichtigungsschaltflächen Symbole hinzufügen,
- den Zeitstempel ändern, um eine konsistente Darstellung zu ermöglichen,
- Schließen-Ereignisse für Benachrichtigungen zu erfassen, um Benachrichtigungen zu synchronisieren und Analysen zu ermöglichen,
- Verwalten Sie die erneute Benachrichtigung, wenn eine Benachrichtigung die aktuell angezeigte Benachrichtigung ersetzt.
In Chrome 50 wurden auch Nutzlasten für Push-Benachrichtigungen eingeführt. Wenn Sie über die Implementierung der Notifications API in Chrome auf dem Laufenden bleiben möchten, folgen Sie der Spezifikation und dem Issue-Tracker für die Spezifikation.
Überzeugende Aktionsschaltflächen mit benutzerdefinierten Symbolen erstellen
In einem aktuellen Beitrag zu Benachrichtigungs-Schaltflächen in Chrome 49 habe ich erwähnt, dass Sie keine Bilder an Benachrichtigungs-Schaltflächen anhängen können, um sie ansprechender zu gestalten. Sie können jedoch Unicode-Zeichen verwenden, um Inline-Emojis usw. einzufügen. Mit dieser neuen Funktion können Sie jetzt ein Bild auf der Aktionsschaltfläche angeben:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
Das Symbol für die Aktion sieht je nach Plattform unterschiedlich aus. Auf Android-Geräten wird das Symbol beispielsweise ab Lollipop mit einem dunkelgrauen Filter und vor Lollipop mit einem weißen Filter dargestellt. Auf Desktop-Computern wird es in voller Farbe angezeigt. Hinweis: Es gibt eine Diskussion über die Zukunft dieser Funktion auf Computern. Auf einigen Plattformen können Aktionssymbole möglicherweise nicht einmal angezeigt werden. Verwenden Sie die Symbole daher, um der Aktion Kontext zu geben, und nicht als einzigen Indikator für die Intention.
Da die Ressourcen heruntergeladen werden müssen, ist es ratsam, die Symbole so klein wie möglich zu halten und sie bei der Installation vorab im Cache zu speichern. (Zum Zeitpunkt der Erstellung dieses Dokuments werden Abrufe von Benachrichtigungsressourcen in Chrome noch nicht über den Service Worker weitergeleitet.)
Ereignisse vom Typ „Benachrichtigung schließen“
Eine häufig angeforderte Funktion für Benachrichtigungen ist die Möglichkeit, zu erfahren, wann der Nutzer eine Benachrichtigung geschlossen hat. Das war erst möglich, nachdem mit jüngsten Änderungen an der Benachrichtigungsspezifikation ein „notificationclose“-Ereignis hinzugefügt wurde.
Mit den Ereignissen „notificationclick“ und „notificationclose“ können Sie nachvollziehen, wie Ihre Nutzer mit Ihren Benachrichtigungen interagieren. Lassen sie sie lange offen und lehnen sie sie dann aktiv ab oder reagieren sie sofort darauf?
Ein beliebter Anwendungsfall ist die Synchronisierung von Benachrichtigungen zwischen Geräten. Wenn der Nutzer eine Benachrichtigung auf seinem Desktopgerät schließt, sollte dieselbe Benachrichtigung auch auf seinem Mobilgerät geschlossen werden. Das ist noch nicht im Hintergrund möglich, da für jede Push-Nachricht eine Benachrichtigung angezeigt werden muss. Mit „notificationclose“ können Sie jedoch den Benachrichtigungsstatus für den Nutzer auf Ihrem Server verfolgen und mit den anderen Geräten synchronisieren, die der Nutzer verwendet.
Wenn Sie das Ereignis „notificationclose“ verwenden möchten, müssen Sie es in Ihrem Service Worker registrieren. Es wird nur ausgelöst, wenn der Nutzer eine Benachrichtigung aktiv schließt, z. B. wenn er eine bestimmte Benachrichtigung oder alle Benachrichtigungen in der Benachrichtigungsleiste (unter Android) schließt.
Wenn das Flag „requireInteraction“ auf „false“ gesetzt oder nicht festgelegt ist und die Benachrichtigung nicht manuell vom Nutzer, sondern automatisch vom System geschlossen wird, wird das Ereignis „notificationclose“ nicht ausgelöst.
Unten sehen Sie eine einfache Implementierung. Wenn der Nutzer die Benachrichtigung schließt, haben Sie Zugriff auf das Benachrichtigungsobjekt, über das Sie benutzerdefinierte Logik ausführen können.
self.addEventListener('notificationclose', e => console.log(e.notification));
Sie können dies im Notification Generator testen. Wenn Sie die Benachrichtigung schließen, erhalten Sie eine Benachrichtigung.
Nutzer nicht verärgern, wenn Sie eine vorhandene Benachrichtigung ersetzen
Ich bin mir ziemlich sicher, dass Onkel Ben nicht über die Kräfte von Peter Parker, sondern über das Benachrichtigungssystem sprach, als er sagte: „Aus großer Macht folgt große Verantwortung.“ Das Benachrichtigungssystem ist ein leistungsstarkes Medium für die Interaktion mit Nutzern. Wenn du ihr Vertrauen missbrauchst, werden sie alle Benachrichtigungen deaktivieren und du verlierst sie möglicherweise ganz.
Wenn Sie eine Benachrichtigung erstellen, können Sie festlegen, dass ein akustisches Signal ausgegeben oder das Gerät vibriert werden soll, um die Aufmerksamkeit des Nutzers zu erregen. Außerdem können Sie eine vorhandene Benachrichtigung ersetzen, indem Sie das Attribut „Tag“ in einem neuen Benachrichtigungsobjekt wiederverwenden.
Vor Chrome 50 wurde jedes Mal, wenn Sie eine Benachrichtigung erstellt oder eine vorhandene Benachrichtigung ersetzt haben, ein Vibrationsmuster ausgeführt oder ein akustisches Signal abgespielt. Das konnte für Ihre Nutzer frustrierend sein. In Chrome 50 haben Sie jetzt die Möglichkeit, über ein einfaches boolesches Flag namens „renotify“ festzulegen, was bei der erneuten Benachrichtigung passiert. Das neue Standardverhalten bei Verwendung desselben „Tag“ für nachfolgende Benachrichtigungen ist, dass keine Benachrichtigung angezeigt wird. Als Entwickler müssen Sie die Option zum erneuten Benachrichtigen des Nutzers aktivieren, indem Sie das Flag auf „true“ setzen.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Sie können das im Benachrichtigungsgenerator ausprobieren.
Zeitstempel verwalten, der dem Nutzer angezeigt wird
Unter Android wird bei Chrome-Benachrichtigungen standardmäßig oben rechts die Uhrzeit angezeigt, zu der sie erstellt wurden. Leider entspricht diese Zeit möglicherweise nicht dem Zeitpunkt, zu dem die Benachrichtigung tatsächlich von Ihrem System generiert wurde. Das Ereignis wurde möglicherweise ausgelöst, als das Gerät offline war, oder die Benachrichtigung wird für eine bevorstehende Videokonferenz angezeigt. Seit Chrome 50 gibt es die neue Eigenschaft timestamp, mit der Entwickler die Zeit angeben können, die in der Benachrichtigung angezeigt werden soll.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
Der Zeitstempel ist derzeit nur in Chrome für Android sichtbar. Auch wenn sie auf Computern nicht sichtbar ist, wirkt sie sich auf die Reihenfolge der Benachrichtigungen auf Mobilgeräten und Computern aus.