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 der ServiceWorkerGlobalScope-Schnittstelle wird ausgelöst, um anzuzeigen, dass eine Systembenachrichtigung, die durch ServiceWorkerRegistration.showNotification() erzeugt wurde, angeklickt wurde.

Benachrichtigungen, die im Haupt-Thread oder in anderen Arbeitern 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 abbruchfähig und blubbert nicht.

Syntax

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

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

onnotificationclick = (event) => { }

Ereignistyp

Ein NotificationEvent. Erbt von ExtendableEvent und Event.

Ereigniseigenschaften

Erbt Eigenschaften von seinen Vorfahren, ExtendableEvent und Event.

NotificationEvent.notification Schreibgeschützt: Gibt ein Notification-Objekt zurück, das die Benachrichtigung repräsentiert, die angeklickt wurde, um das Ereignis auszulösen.
NotificationEvent.action Schreibgeschützt: Gibt die Zeichenfolgen-ID der Benachrichtigungsschaltfläche zurück, die der Benutzer angeklickt hat. Dieser Wert gibt eine leere Zeichenfolge zurück, wenn der Benutzer die Benachrichtigung an einer anderen Stelle als auf einer Aktionsschaltfläche angeklickt hat oder die Benachrichtigung keine Schaltfläche hat.

Beispiele

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

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:

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 innerhalb eines notificationclick-Ereignishandlers mit event.action behandeln:

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 # activating-a-notification
Notifications API # dom-serviceworkerglobalscope-onnotificationclick