Mit PPush-Benachrichtigungen können Sie Ihren Nutzern ein App-ähnliches Erlebnis bieten, indem Sie sie über wichtige und zeitnahe Updates wie eingehende Chatnachrichten informieren. Die Benachrichtigungsplattform ist in Browsern relativ neu. Da immer mehr Anwendungsfälle und Anforderungen ausgefeilt werden, sehen wir viele Ergänzungen zu den APIs für Benachrichtigungen. Chrome 50 (Beta im März 2016) ist da keine Ausnahme. Es verfügt über vier neue Funktionen, die Entwicklern mehr Kontrolle über Benachrichtigungen geben. Sie haben folgende Möglichkeiten:
- Symbole zu den Benachrichtigungsschaltflächen hinzufügen,
- den Zeitstempel ändern, um für ein einheitliches Erlebnis zu sorgen,
- Schließen-Ereignisse von Benachrichtigungen verfolgen, um Benachrichtigungen zu synchronisieren und Analysen bereitzustellen,
- die aktuell angezeigte Benachrichtigung durch eine Benachrichtigung ersetzt.
In Chrome 50 wurden außerdem Nutzlasten für Push-Benachrichtigungen hinzugefügt. Wenn du über die in Chrome implementierte Notifications API auf dem Laufenden bleiben möchtest, folge der spec und dem Issue Tracker für die Spezifikation.
Ansprechende Aktionsschaltflächen mit benutzerdefinierten Symbolen erstellen
In einem aktuellen Beitrag zu Schaltflächen für Benachrichtigungsaktionen in Chrome 49 habe ich erwähnt, dass man keine Bilder an Benachrichtigungsschaltflächen anhängen kann, um sie raffiniert und ansprechend zu gestalten. Es ist jedoch möglich, Unicode-Zeichen für Inline-Emojis usw. zu verwenden. Das ist jetzt kein Grund zur Beunruhigung: Mit dieser Neuerung können Sie jetzt ein Bild für die 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 Aktionssymbol sieht je nach Plattform unterschiedlich aus. Auf Android-Geräten wird für das Symbol beispielsweise ein dunkelgrauer Filter ab Lollipop und ein weißer Filter vor Lollipop verwendet. Auf Desktop-Computern ist es vollfarbig. (Hinweis: Es gibt Diskussionen über die Zukunft dieser Version auf Desktop-Computern.) Auf einigen Plattformen können möglicherweise keine Aktionssymbole angezeigt werden. Achten Sie deshalb darauf, dass Sie diese Symbole verwenden, um Kontext für die Aktion bereitzustellen, und nicht als alleinigen Indikator für den Intent.
Da die Ressourcen schließlich heruntergeladen werden müssen, empfiehlt es sich, die Symbole so klein wie möglich zu halten und bei der Installation vorab im Cache zu speichern. Zum Zeitpunkt der Veröffentlichung dieses Artikels werden Abrufe von Benachrichtigungsressourcen in Chrome noch nicht über den Service Worker weitergeleitet.
Ereignisse zum Schließen von Benachrichtigungen
Eine häufig angefragte Funktion von Benachrichtigungen ist die Möglichkeit zu erfahren, wann der Nutzer eine Benachrichtigung geschlossen hat. Dies war erst möglich, nachdem eine Reihe von Änderungen an der Benachrichtigungsspezifikation ein Notificationclose-Ereignis hinzugefügt hatte.
Mithilfe der Ereignisse „ Notificationclick“ und „ Notificationclose“ können Sie nachvollziehen, wie Nutzer mit Ihren Benachrichtigungen interagieren. Lassen sie sie über einen längeren Zeitraum geöffnet und lehnen sie sie dann aktiv ab oder reagieren sie sofort auf sie?
Ein beliebter Anwendungsfall ist die Synchronisierung von Benachrichtigungen zwischen Geräten. Wenn der Nutzer eine Benachrichtigung auf seinem Desktop-Gerät schließt, sollte diese Benachrichtigung auch auf seinem Mobilgerät geschlossen werden. Derzeit ist dies noch nicht im Hintergrund möglich (Denke daran, dass für jede Push-Nachricht eine Benachrichtigung angezeigt werden muss). Mit Notificationclose ist dies jedoch möglich, da du den Benachrichtigungsstatus für den Nutzer auf deinem Server verfolgen und ihn mit den anderen Geräten synchronisieren kannst, wenn der Nutzer sie verwendet.
Wenn Sie das Ereignis „notificationclose“ verwenden möchten, registrieren Sie es in Ihrem Service Worker. Es wird dann nur ausgelöst, wenn der Nutzer eine Benachrichtigung aktiv geschlossen hat, z. B. wenn der Nutzer eine bestimmte Benachrichtigung oder alle Benachrichtigungen in seiner Ablage (unter Android) löscht.
Wenn das Flag „requireInteraction“ auf „false“ gesetzt oder nicht gesetzt ist, wird das Ereignis zum Schließen der Benachrichtigung nicht ausgelöst, wenn die Benachrichtigung nicht manuell, sondern automatisch vom System geschlossen wird.
Unten sehen Sie eine einfache Implementierung. Wenn der Nutzer die Benachrichtigung schließt, erhalten Sie Zugriff auf das Benachrichtigungsobjekt, über das Sie eine benutzerdefinierte Logik ausführen können.
self.addEventListener('notificationclose', e => console.log(e.notification));
Sie können dies im Benachrichtigungsgenerator testen. Sie erhalten eine Benachrichtigung, wenn Sie die Benachrichtigung schließen.
Nutzer nicht stören, wenn Sie eine vorhandene Benachrichtigung ersetzen
Ich bin mir ziemlich sicher, dass Onkel Ben über das Benachrichtigungssystem und nicht über die Kräfte von Peter Parker sprach, als er sagte: "Mit großer Macht kommt große Verantwortung". Das Benachrichtigungssystem ist ein leistungsfähiges Medium für die Interaktion mit Nutzenden. Wenn Sie ihr Vertrauen missbrauchen, werden alle Benachrichtigungen deaktiviert und Sie können sie ganz verlieren.
Wenn Sie eine Benachrichtigung erstellen, können Sie sie so einstellen, dass eine akustische Warnung oder eine Vibration ausgelöst wird, um die Aufmerksamkeit des Nutzers zu erregen. Außerdem können Sie eine vorhandene Benachrichtigung ersetzen, indem Sie ihr Tag-Attribut 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 ausgegeben, was bei den Nutzern zu Frustration führen konnte. In Chrome 50 haben Sie jetzt die Kontrolle darüber, was während der erneuten Benachrichtigung über ein einfaches boolesches Flag namens „renotify“ geschieht. Das neue Standardverhalten bei der Verwendung desselben Tags für nachfolgende Benachrichtigungen ist lautlos. Da der Entwickler den Nutzer neu benachrichtigen muss, muss er das Flag auf „true“ setzen.
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Sie können dies im Benachrichtigungsgenerator ausprobieren.
Zeitstempel verwalten, der dem Nutzer angezeigt wird
Auf Android-Geräten wird in den Chrome-Benachrichtigungen standardmäßig oben rechts der Erstellungszeitpunkt angezeigt. Leider ist dies möglicherweise nicht der Zeitpunkt, zu dem die Benachrichtigung tatsächlich von Ihrem System generiert wurde. Es kann beispielsweise sein, dass das Ereignis ausgelöst wurde, als das Gerät offline war, oder die Benachrichtigung für eine anstehende Besprechung angezeigt wird. Ab Chrome 50 wurde in Chrome eine neue Eigenschaft timestamp hinzugefügt, 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. Auf Computern ist sie zwar nicht sichtbar, wirkt sich aber auf die Reihenfolge der Benachrichtigungen auf Mobilgeräten und Computern aus.