Benachrichtigungsverhalten

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn
Matt Gaunt
X Startseite

Bisher haben wir uns die Optionen angesehen, mit denen sich das Erscheinungsbild einer Benachrichtigung ändern lässt. 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 Folgendes:

  • Wenn Sie auf die Benachrichtigung klicken, passiert nichts.
  • Jede neue Benachrichtigung wird nacheinander angezeigt. Der Browser minimiert die Benachrichtigungen in keiner Weise.
  • Die Plattform kann einen Ton abspielen oder das Gerät des Nutzers vibrieren lassen (je nach Plattform).
  • Auf einigen Plattformen verschwindet die Benachrichtigung nach kurzer Zeit, während sie auf anderen angezeigt wird, bis der Nutzer damit interagiert. (Vergleichen Sie beispielsweise Ihre Benachrichtigungen auf Android und auf dem Desktop.)

In diesem Abschnitt sehen wir uns an, wie wir dieses Standardverhalten nur mithilfe von Optionen ändern können. Diese sind relativ einfach zu implementieren und zu nutzen.

Click-Event für Benachrichtigungen

Wenn ein Nutzer auf eine Benachrichtigung klickt, passiert standardmäßig nichts. Die Benachrichtigung wird nicht einmal geschlossen oder entfernt.

In der Regel wird eine Benachrichtigung durch Klicken geschlossen und es wird eine andere Logik ausgeführt, z.B. ein Fenster geöffnet oder ein API-Aufruf an die Anwendung gesendet.

Dazu müssen Sie dem Service Worker einen 'notificationclick'-Event-Listener hinzufügen. Diese wird immer 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, kann auf die angeklickte Benachrichtigung als event.notification zugegriffen werden. Darüber können Sie auf die Attribute und Methoden der Benachrichtigung zugreifen. In diesem Fall rufen Sie die Methode close() auf und führen zusätzliche Schritte aus.

Aktionen

Mit Aktionen können Sie eine weitere Interaktionsebene mit Ihren Nutzern schaffen, die über das bloße Klicken auf die Benachrichtigung hinausgeht.

Tasten

Im vorherigen Abschnitt haben Sie gesehen, wie Sie Aktionsschaltflächen beim Aufrufen von showNotification() definieren:

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 einen Aktionsbutton klickt, kannst du anhand des Werts event.action im Ereignis noticationclick feststellen, auf welchen Aktionsbutton geklickt wurde.

event.action enthält den in den Optionen festgelegten action-Wert. Im obigen Beispiel wären die event.action-Werte einer der folgenden: 'coffee-action', 'doughnut-action', 'gramophone-action' oder 'atom-action'.

So können wir Klicks auf Benachrichtigungen oder Aktionen 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 in das 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, die Benachrichtigungen „gruppiert“. So lässt sich leicht festlegen, wie mehrere Benachrichtigungen dem Nutzer angezeigt werden. Das lässt sich am besten anhand eines Beispiels erklären.

Lassen Sie uns eine Benachrichtigung mit dem Tag 'message-group-1' anzeigen. Die Benachrichtigung wird mit diesem Code angezeigt:

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 die erste Benachrichtigung angezeigt.

Erste Benachrichtigung mit Tag der Nachrichtengruppe 1.

Lassen Sie uns eine zweite Benachrichtigung mit dem neuen Tag 'message-group-2' anzeigen:

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Daraufhin wird dem Nutzer eine zweite Benachrichtigung angezeigt.

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

Jetzt zeigen wir eine dritte Benachrichtigung an, verwenden aber das erste Tag von 'message-group-1' wieder. Dadurch wird die erste Benachrichtigung geschlossen und durch die 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);

Wir haben jetzt zwei Benachrichtigungen, obwohl showNotification() dreimal aufgerufen wurde.

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

Die Option tag ist einfach eine Möglichkeit, Nachrichten zu gruppieren, sodass alle alten Benachrichtigungen, die derzeit angezeigt werden, geschlossen werden, wenn sie dasselbe Tag wie eine neue Benachrichtigung haben.

Eine Besonderheit bei der Verwendung von tag ist, dass beim Ersetzen einer Benachrichtigung kein Ton oder keine Vibration ausgegeben wird.

Hier kommt die Option renotify ins Spiel.

Erneut benachrichtigen

Zum Zeitpunkt der Erstellung dieses Artikels gilt dies hauptsächlich für Mobilgeräte. Wenn Sie diese Option festlegen, vibriert das Gerät bei neuen Benachrichtigungen und es wird ein Systemton abgespielt.

Es gibt Szenarien, in denen Sie möchten, dass eine ersetzende Benachrichtigung den Nutzer benachrichtigt, anstatt im Hintergrund aktualisiert zu werden. Chatanwendungen sind ein gutes Beispiel. 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 eine neue Benachrichtigung anzeigen, aber das Standardverhalten von Vibration, Ton und Einschalten des Displays des Geräts verhindern.

Das ist ideal, wenn Ihre Benachrichtigungen nicht sofort die Aufmerksamkeit des Nutzers erfordern.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Interaktion erforderlich

In Chrome auf dem Computer werden Benachrichtigungen für einen bestimmten Zeitraum angezeigt, bevor sie ausgeblendet werden. Chrome für Android verhält sich nicht so. 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 angezeigt, bis der Nutzer sie schließt oder darauf klickt.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Verwenden Sie diese Option mit Bedacht. Es kann frustrierend sein, wenn eine Benachrichtigung angezeigt wird und der Nutzer seine aktuelle Aktivität unterbrechen muss, um sie zu schließen.

Im nächsten Abschnitt sehen wir uns einige der gängigen Muster im Web an, die zum Verwalten von Benachrichtigungen und zum Ausführen von Aktionen wie dem Öffnen von Seiten beim Klicken auf eine Benachrichtigung verwendet werden.

Weitere Informationen

Code labs