ServiceWorkerGlobalScope: notificationclick-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist nur in Service Workers verfügbar.

Das notificationclick-Ereignis des ServiceWorkerGlobalScope-Interfaces wird ausgelöst, um anzuzeigen, dass eine Systembenachrichtigung, die von ServiceWorkerRegistration.showNotification() erzeugt wurde, angeklickt wurde.

Benachrichtigungen, die im Hauptthread oder in Workern erstellt werden, die keine Service-Worker sind und den Notification()-Konstruktor verwenden, erhalten stattdessen ein click-Ereignis auf dem Notification-Objekt selbst.

Dieses Ereignis ist nicht abbrechbar und wird nicht propagiert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("notificationclick", (event) => {});

onnotificationclick = (event) => {};

Ereignistyp

Ein NotificationEvent. Erbt von ExtendableEvent und Event.

Event ExtendableEvent NotificationEvent

Ereigniseigenschaften

Erbt Eigenschaften von seinen Vorfahren, ExtendableEvent und Event.

NotificationEvent.notification Schreibgeschützt

Gibt ein Notification-Objekt zurück, das die Benachrichtigung darstellt, die angeklickt wurde, um das Ereignis auszulösen.

NotificationEvent.action Schreibgeschützt

Gibt die string-ID des Benachrichtigungsknopfes zurück, den der Benutzer angeklickt hat. Dieser Wert ist ein leerer String, wenn der Benutzer die Benachrichtigung an einer anderen Stelle als an einem Aktion-Button angeklickt hat oder die Benachrichtigung keinen Button hat.

Beispiele

Sie können das notificationclick-Ereignis in einer addEventListener-Methode verwenden:

js
self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});

Oder verwenden Sie die onnotificationclick-Ereignishandler-Eigenschaft:

js
self.onnotificationclick = (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) return client.focus();
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
};

Sie können Ereignisaktionen mit event.action innerhalb eines notificationclick-Ereignishandlers behandeln:

js
navigator.serviceWorker.register("sw.js");
Notification.requestPermission().then((result) => {
  if (result === "granted") {
    navigator.serviceWorker.ready.then((registration) => {
      // Show a notification that includes an action titled Archive.
      registration.showNotification("New mail from Alice", {
        actions: [
          {
            action: "archive",
            title: "Archive",
          },
        ],
      });
    });
  }
});

self.addEventListener(
  "notificationclick",
  (event) => {
    event.notification.close();
    if (event.action === "archive") {
      // User selected the Archive action.
      archiveEmail();
    } else {
      // User selected (e.g., clicked in) the main body of notification.
      clients.openWindow("/inbox");
    }
  },
  false,
);

Spezifikationen

Specification
Notifications API Standard
# activating-a-notification
Notifications API Standard
# dom-serviceworkerglobalscope-onnotificationclick

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch