Mit Push-Benachrichtigungen können Sie Ihren Nutzern eine App-ähnliche Umgebung bieten und sie über wichtige und aktuelle Informationen wie eingehende Chatnachrichten informieren. Die Benachrichtigungsplattform ist in Browsern relativ neu. Da immer mehr Anwendungsfälle und Anforderungen ausgearbeitet werden, werden die APIs für Benachrichtigungen ständig erweitert. Chrome 50 (Betaversion im März 2016) ist keine Ausnahme. Es bietet nicht weniger als vier neue Funktionen, mit denen Entwickler Benachrichtigungen besser verwalten können. Sie haben folgende Möglichkeiten:
- Benachrichtigungsschaltflächen Symbole hinzufügen,
- den Zeitstempel ändern, um für Konsistenz zu sorgen,
- Ereignisse zum Schließen von Benachrichtigungen erfassen, um Benachrichtigungen zu synchronisieren und Analysen bereitzustellen,
- die Funktion zum erneuten Benachrichtigen verwalten, wenn eine Benachrichtigung die aktuell angezeigte Benachrichtigung ersetzt.
In Chrome 50 wurden außerdem Nutzlast für Push-Benachrichtigungen hinzugefügt. Wenn Sie über die Implementierung der Notifications API in Chrome auf dem Laufenden bleiben möchten, folgen Sie der Spezifikation und dem Fehler-Tracker für die Spezifikation.
Eindrucksvolle Aktionsschaltflächen mit benutzerdefinierten Symbolen erstellen
In einem vor Kurzem veröffentlichten Beitrag zu Aktionsschaltflächen für Benachrichtigungen in Chrome 49 habe ich erwähnt, dass Sie keine Bilder an Benachrichtigungsschaltflächen anhängen können, um sie ansprechender zu gestalten. Sie können aber Unicode-Zeichen verwenden, um Emojis usw. einzufügen. Das ist jetzt nicht mehr nötig: 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 Aussehen des Aktionssymbols variiert je nach Plattform. Auf Android-Geräten wird das Symbol beispielsweise unter Lollipop und höher mit einem dunkelgrauen Filter und vor Lollipop mit einem weißen Filter versehen. Auf dem Computer ist es dagegen in Farbe zu sehen. Hinweis: Es gibt Diskussionen über die Zukunft dieser Funktion auf dem Computer. Auf einigen Plattformen können Aktionssymbole möglicherweise nicht angezeigt werden. Verwenden Sie die Symbole daher, um den Kontext der Aktion zu verdeutlichen, und nicht als einzigen Indikator für die Absicht.
Da die Ressourcen heruntergeladen werden müssen, sollten Sie die Symbole möglichst klein halten und sie im Installationsereignis im Voraus im Cache speichern. (Zum Zeitpunkt der Erstellung dieses Artikels werden Abrufe von Benachrichtigungsressourcen in Chrome noch nicht über den Service Worker geleitet.)
Ereignisse vom Typ „Benachrichtigung schließen“
Eine häufig angefragte Funktion von Benachrichtigungen ist die Möglichkeit zu erkennen, wann der Nutzer eine Benachrichtigung geschlossen hat. Das war bis vor Kurzem nicht möglich. Mit den aktuellen Änderungen an der Benachrichtigungsspezifikation wurde das Ereignis „notificationclose“ hinzugefügt.
Mithilfe der Ereignisse „notificationclick“ und „notificationclose“ können Sie nachvollziehen, wie Nutzer mit Ihren Benachrichtigungen interagieren. Lässt er sie lange offen und schließt sie dann aktiv oder geht er sofort darauf ein?
Ein beliebter Anwendungsfall ist die Synchronisierung von Benachrichtigungen zwischen Geräten. Wenn der Nutzer eine Benachrichtigung auf seinem Computer schließt, sollte dieselbe Benachrichtigung auch auf seinem Mobilgerät geschlossen werden. Wir können dies noch nicht im Hintergrund tun (erinnern Sie sich, dass für jede Push-Nachricht eine Benachrichtigung angezeigt werden muss). Mit „notificationclose“ können Sie jedoch den Benachrichtigungsstatus des Nutzers auf Ihrem Server verfolgen und mit den anderen Geräten synchronisieren, während der Nutzer sie verwendet.
Wenn Sie das Ereignis „notificationclose“ verwenden möchten, registrieren Sie es in Ihrem Service Worker. Es wird nur ausgelöst, wenn der Nutzer eine Benachrichtigung aktiv geschlossen hat, z. B. wenn er eine bestimmte Benachrichtigung oder alle Benachrichtigungen im Benachrichtigungs-Tray schließt (unter Android).
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, erhalten 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 das im Benachrichtigungsgenerator testen. Sie erhalten dann eine Benachrichtigung, wenn Sie die Benachrichtigung schließen.
Ärgern Sie Ihre Nutzer nicht, wenn Sie eine vorhandene Benachrichtigung ersetzen
Ich bin mir ziemlich sicher, dass Onkel Ben mit seinem Satz „Mit großer Macht kommt große Verantwortung“ auf das Benachrichtigungssystem und nicht auf die Kräfte von Peter Parker anspielte. Das Benachrichtigungssystem ist ein leistungsstarkes Medium für die Interaktion mit Nutzern. Wenn Sie ihr Vertrauen missbrauchen, werden alle Benachrichtigungen deaktiviert und Sie verlieren sie möglicherweise vollständig.
Wenn Sie eine Benachrichtigung erstellen, können Sie festlegen, dass sie einen akustischen Alarm auslöst oder vibriert, um die Aufmerksamkeit des Nutzers zu erregen. Außerdem können Sie eine vorhandene Benachrichtigung ersetzen, indem Sie das Attribut „tag“ für ein neues Benachrichtigungsobjekt wiederverwenden.
Vor Chrome 50 wurde jedes Mal, wenn Sie eine Benachrichtigung erstellt oder eine vorhandene ersetzt haben, ein Vibrationsmuster ausgeführt oder ein akustisches Signal abgespielt. Das konnte für Ihre Nutzer frustrierend sein. In Chrome 50 können Sie über ein einfaches boolesches Flag namens „renotify“ festlegen, was bei der erneuten Benachrichtigung passieren soll. Wenn Sie dasselbe Tag für nachfolgende Benachrichtigungen verwenden, ist das neue Standardverhalten stumm. Als Entwickler müssen Sie die Option „Nutzer noch einmal benachrichtigen“ aktivieren, indem Sie das Flag auf „wahr“ setzen.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Sie können das im Benachrichtigungsgenerator ausprobieren.
Zeitstempel für Nutzer verwalten
Unter Android wird in Chrome standardmäßig rechts oben das Erstellungsdatum und -uhrzeit der Benachrichtigung angezeigt. Leider ist das möglicherweise nicht der Zeitpunkt, zu dem die Benachrichtigung tatsächlich von Ihrem System generiert wurde. Das Ereignis wurde beispielsweise ausgelöst, als das Gerät offline war, oder die Benachrichtigung wird für eine anstehende Videokonferenz angezeigt. Seit Chrome 50 wurde die neue Property „Zeitstempel“ hinzugefügt, mit der Entwickler die Uhrzeit 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. Sie ist zwar auf dem Computer nicht sichtbar, wirkt sich aber sowohl auf Mobilgeräten als auch auf Computern auf die Reihenfolge der Benachrichtigungen aus.
durch.