Benachrichtigungsverhalten

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Matt Gaunt
X Startseite

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.

Erste Benachrichtigung mit dem Tag der Nachrichtengruppe 1.

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.

Zwei Benachrichtigungen, wobei das zweite Tag der Nachrichtengruppe 2 vorhanden ist.

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.

Zwei Benachrichtigungen, wobei die erste durch eine dritte ersetzt wird.

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

Code-Labs