Bisher haben wir uns mit den Optionen beschäftigt, mit denen das visuelle Erscheinungsbild von Benachrichtigungen geändert werden kann. Es gibt auch Optionen, mit denen das Verhalten von Benachrichtigungen geändert werden kann.
Wenn Sie showNotification()
nur mit visuellen Optionen aufrufen, gilt standardmäßig das folgende Verhalten:
- Ein Klick auf die Benachrichtigung hat keine Auswirkungen.
- Jede neue Benachrichtigung wird nacheinander angezeigt. Der Browser minimiert die Benachrichtigungen in keiner Weise.
- Die Plattform kann auf dem Gerät des Nutzers einen Ton abspielen oder vibrieren.
- Auf einigen Plattformen verschwindet die Benachrichtigung nach kurzer Zeit, während sie auf anderen Plattformen angezeigt wird, wenn der Nutzer nicht damit interagiert. (Vergleiche z. B. deine Benachrichtigungen auf Android- und Desktop-Geräten.)
In diesem Abschnitt sehen wir uns an, wie wir dieses Standardverhalten allein mithilfe von Optionen ändern können. Diese lassen sich relativ einfach implementieren und nutzen.
Benachrichtigungs-Klickereignis
Wenn ein Nutzer auf eine Benachrichtigung klickt, geschieht standardmäßig nichts. Die Benachrichtigung wird dadurch nicht einmal geschlossen oder entfernt.
Üblicherweise wird ein Benachrichtigungsklick geschlossen und eine andere Logik ausgeführt (z.B. ein Fenster geöffnet oder ein API-Aufruf an die Anwendung ausgeführt).
Dazu müssen Sie unserem Service Worker einen 'notificationclick'
-Event-Listener hinzufügen. Sie wird aufgerufen, wenn auf eine Benachrichtigung geklickt wird.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Wie Sie in diesem Beispiel sehen können, kann die angeklickte Benachrichtigung als event.notification
aufgerufen werden. Von hier aus können Sie auf die Eigenschaften und Methoden der Benachrichtigung zugreifen. In diesem Fall rufen Sie die Methode close()
auf und führen zusätzliche Arbeit aus.
Aktionen
Aktionen bieten eine weitere Ebene der Interaktion mit Ihren Nutzern, statt nur auf die Benachrichtigung zu klicken.
Schaltflächen
Im vorherigen Abschnitt haben Sie gesehen, wie Aktionsschaltflächen beim Aufrufen von showNotification()
definiert werden:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Wenn der Nutzer auf eine Aktionsschaltfläche klickt, prüfen Sie den Wert event.action
im Ereignis noticationclick
, um festzustellen, auf welche Aktionsschaltfläche geklickt wurde.
event.action
enthält den in den Optionen festgelegten Wert für action
. Im Beispiel oben wären die event.action
-Werte einer der folgenden: 'coffee-action'
, 'doughnut-action'
, 'gramophone-action'
oder 'atom-action'
.
Damit würden wir Klicks auf Benachrichtigungen oder Aktionsklicks wie folgt erkennen:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Inline-Antworten
Im vorherigen Abschnitt haben Sie außerdem gesehen, wie Sie der Benachrichtigung eine Inline-Antwort hinzufügen:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
event.reply
enthält den Wert, den der Nutzer im Eingabefeld eingegeben hat:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Tag
Die Option tag
ist im Wesentlichen eine String-ID, mit der Benachrichtigungen „gruppiert“ werden. So lässt sich auf einfache Weise festlegen, wie mehrere Benachrichtigungen dem Nutzer angezeigt werden. Dies lässt sich am
einfachsten anhand eines Beispiels erklären.
Lassen Sie uns eine Benachrichtigung anzeigen und ihr das Tag 'message-group-1'
zuweisen. Wir würden die Benachrichtigung
mit diesem Code anzeigen:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Dadurch wird unsere erste Benachrichtigung angezeigt.
Hier eine zweite Benachrichtigung mit dem neuen Tag 'message-group-2'
:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
Dem Nutzer wird dann eine zweite Benachrichtigung angezeigt.
Wir zeigen Ihnen jetzt eine dritte Benachrichtigung und verwenden das erste Tag von 'message-group-1'
noch einmal. Dadurch wird die erste Benachrichtigung geschlossen und durch unsere neue ersetzt.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Jetzt haben wir zwei Benachrichtigungen, obwohl showNotification()
dreimal aufgerufen wurde.
Mit der Option tag
können Sie Nachrichten gruppieren, sodass alle derzeit angezeigten alten Benachrichtigungen geschlossen werden, wenn sie das gleiche Tag wie eine neue Benachrichtigung haben.
Die Feinheiten der Verwendung von tag
besteht darin, dass beim Ersetzen einer Benachrichtigung ohne Ton oder Vibration die Funktion verwendet wird.
Hier kommt die Option renotify
ins Spiel.
Erneut benachrichtigen
Zum Zeitpunkt der Erstellung dieses Dokuments galt dies hauptsächlich für Mobilgeräte. Wenn Sie diese Option festlegen, vibriert neue Benachrichtigung und es wird ein Systemton abgespielt.
Es gibt Szenarien, in denen Sie den Nutzer über eine Ersetzungsbenachrichtigung informieren möchten, anstatt eine Aktualisierung unbemerkt auszuführen. Ein gutes Beispiel hierfür sind Chat-Apps. In diesem Fall sollten Sie tag
und renotify
auf true
setzen.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Lautlos
Mit dieser Option können Sie sich eine neue Benachrichtigung anzeigen lassen. Das Standardverhalten für Vibration und Töne sowie das Einschalten des Displays des Geräts werden dann aber nicht mehr aktiviert.
Das ist ideal, wenn Ihre Benachrichtigungen nicht sofort vom Nutzer bearbeitet werden müssen.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Interaktion erforderlich
In der Desktopversion von Chrome werden Benachrichtigungen für einen festgelegten Zeitraum angezeigt, bevor sie ausgeblendet werden. Chrome unter Android hat dieses Verhalten nicht. Benachrichtigungen werden angezeigt, bis der Nutzer mit ihnen interagiert.
Wenn Sie erzwingen möchten, dass eine Benachrichtigung sichtbar bleibt, bis der Nutzer mit ihr interagiert, fügen Sie die Option requireInteraction
hinzu. Die Benachrichtigung wird so lange angezeigt, bis der Nutzer sie schließt oder anklickt.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Verwenden Sie diese Option mit Bedacht. Es kann frustrierend sein, eine Benachrichtigung anzuzeigen und den Nutzer dazu zu zwingen, seine Aktion abzubrechen, um die Benachrichtigung zu schließen.
Im nächsten Abschnitt sehen wir uns einige gängige Muster an, die im Web zum Verwalten von Benachrichtigungen und zum Ausführen von Aktionen wie das Öffnen von Seiten beim Anklicken einer Benachrichtigung verwendet werden.
Weitere Informationen
- Übersicht über Web-Push-Benachrichtigungen
- Funktionsweise von Push
- Nutzer abonnieren
- UX-Berechtigung
- Nachrichten mit Web Push-Bibliotheken senden
- Web Push-Protokoll
- Push-Ereignisse verarbeiten
- Benachrichtigungen anzeigen
- Benachrichtigungsverhalten
- Gängige Benachrichtigungsmuster
- Häufig gestellte Fragen zu Push-Benachrichtigungen
- Häufige Probleme und Fehler melden