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 einer Benachrichtigung geändert werden kann. Es gibt auch Optionen, die das Verhalten von Benachrichtigungen ändern können.

Wenn showNotification() nur mit visuellen Optionen aufgerufen wird, hat dies standardmäßig Folgendes: Verhalten:

  • Durch Klicken auf die Benachrichtigung passiert nichts.
  • Jede neue Benachrichtigung wird nacheinander angezeigt. Der Browser blendet die Benachrichtigungen erhalten.
  • Je nach Plattform kann die Plattform einen Ton abspielen oder das Gerät des Nutzers vibrieren.
  • Auf einigen Plattformen verschwindet die Benachrichtigung nach kurzer Zeit, auf anderen die Benachrichtigung anzuzeigen, es sei denn, der Nutzer interagiert mit ihr. (Sie können z. B. Ihre Benachrichtigungen auf Android-Geräten und Computern)

In diesem Abschnitt sehen wir uns an, wie wir diese Standardverhaltensweisen mithilfe von Optionen ändern können. allein. Sie lassen sich relativ einfach implementieren und nutzen.

Benachrichtigungs-Klickereignis

Wenn ein Nutzer auf eine Benachrichtigung klickt, geschieht standardmäßig nichts. Nicht sogar die Benachrichtigung schließen oder entfernen.

Üblicherweise werden Benachrichtigungsklicks geschlossen und eine andere Logik ausgeführt (z.B. ein Fenster öffnen oder einen API-Aufruf an die Anwendung senden).

Dazu müssen Sie unserem Service Worker einen 'notificationclick'-Event-Listener hinzufügen. Dieses 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, kann auf die Benachrichtigung, auf die geklickt wurde, über event.notification Über diese Option können Sie auf die Eigenschaften und Methoden der Benachrichtigung zugreifen. In dieser rufen Sie die zugehörige close()-Methode auf und führen zusätzliche Schritte aus.

Aktionen

Aktionen ermöglichen es Ihnen, eine andere Ebene der Interaktion mit Ihren Nutzern zu schaffen, anstatt nur auf das Symbol Benachrichtigung.

Tasten

Im vorherigen Abschnitt haben wir 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üfe den Wert event.action in der noticationclick an, auf welche Aktionsschaltfläche geklickt wurde.

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

Damit würden wir Klicks auf Benachrichtigungen oder Aktionen 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 eine Inline-Antwort auf die Benachrichtigung hinzufügen können:

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 vom Nutzer eingegebenen Wert in das Eingabefeld:

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 „gruppiert“, Benachrichtigungen zusammenzustellen, Möglichkeit, festzulegen, wie mehrere Benachrichtigungen dem Nutzer angezeigt werden. Das ist am einfachsten zu erklären, anhand eines Beispiels.

Lassen Sie uns eine Benachrichtigung anzeigen und ihr das Tag 'message-group-1' zuweisen. Wir zeigen die Benachrichtigung mit diesem Code:

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 Tag der Nachrichtengruppe 1.

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

const title = 'Notification 2 of 3';

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

registration.showNotification(title, options);

Dadurch wird dem Nutzer eine zweite Benachrichtigung angezeigt.

Zwei Benachrichtigungen, wobei das zweite Tag der Nachrichtengruppe 2.

Nun wird eine dritte Benachrichtigung angezeigt, wobei das erste Tag von 'message-group-1' wiederverwendet wird. Vorgehensweise 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);

Jetzt haben wir zwei Benachrichtigungen, obwohl showNotification() dreimal aufgerufen wurde.

Zwei Benachrichtigungen, bei denen die erste durch eine dritte ersetzt wird.

Mit der Option tag können Nachrichten so gruppiert werden, dass alle alten Benachrichtigungen, werden aktuell angezeigt, werden geschlossen, wenn sie dasselbe Tag wie eine neue Benachrichtigung haben.

Eine Feinheiten von tag ist, dass eine Benachrichtigung ohne Ton ersetzt wird. oder Vibration.

Hier kommt die Option renotify ins Spiel.

Noch einmal benachrichtigen

Dies gilt vor allem für Mobilgeräte zum Zeitpunkt der Erstellung dieses Dokuments. Wenn Sie diese Option festlegen, bei Benachrichtigungen vibrieren und ein Systemton abspielen.

Es gibt Szenarien, in denen Sie mit einer Ersetzungsbenachrichtigung den Nutzer benachrichtigen möchten, anstatt automatisch aktualisiert. Chat-Anwendungen sind ein gutes Beispiel. In diesem Fall sollten Sie tag und renotify auf true.

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 lassen, verhindert jedoch das Standardverhalten der Vibration, und das Display des Geräts einschalten.

Das ist ideal, wenn Ihre Benachrichtigungen keine sofortigen Aufmerksamkeit des Nutzers erfordern.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Interaktion erforderlich

Chrome auf dem Desktop zeigt Benachrichtigungen für einen festgelegten Zeitraum an, bevor sie ausgeblendet werden. Chrome an Bei Android ist das nicht der Fall. Benachrichtigungen werden angezeigt, bis der Nutzer mit ihnen interagiert.

Wenn du erzwingen möchtest, dass eine Benachrichtigung sichtbar bleibt, bis der Nutzer damit interagiert, füge die requireInteraction hinzu. Option. Die Benachrichtigung wird so lange angezeigt, bis der Nutzer die Benachrichtigung schließt oder darauf klickt.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction: true,
};

registration.showNotification(title, options);

Überlegen Sie es sich gut, ob Sie diese Option verwenden möchten. Benachrichtigung einblenden und Nutzer zwingen, was zu beenden Ihre Benachrichtigung zu schließen, kann frustrierend sein.

Im nächsten Abschnitt schauen wir uns einige der Muster an, die im Web häufig für Verwalten von Benachrichtigungen und Ausführen von Aktionen wie dem Öffnen von Seiten, wenn auf eine Benachrichtigung geklickt wird.

Weitere Informationen

Code labs