ServiceWorkerGlobalScope: notificationclick 事件

安全上下文：此功能仅在 安全上下文 (HTTPS) 中，以及某些或所有 支持的浏览器 中可用。

注意：此功能仅在 Service Workers 中可用。

当由 ServiceWorkerRegistration.showNotification() 生成的系统通知被点击时，ServiceWorkerGlobalScope 接口的 notificationclick 事件会被触发。

使用 Notification() 构造函数在主线程或非 Service Workers 工作线程中创建的通知，将在 Notification 对象本身接收 click 事件。

此事件不可取消，也不冒泡。

语法

在像 addEventListener() 这样的方法中使用事件名称，或设置事件处理程序属性。

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

onnotificationclick = (event) => {};

事件类型

一个 NotificationEvent。继承自 ExtendableEvent 和 Event。

Event ExtendableEvent NotificationEvent

事件属性

继承其祖先 ExtendableEvent 和 Event 的属性.

NotificationEvent.notification 只读

返回一个 Notification 对象，表示触发事件的点击通知。

NotificationEvent.action 只读

返回用户点击的通知按钮的字符串 ID。如果用户点击通知的不是动作按钮，或者通知没有按钮，则此值返回空字符串。

示例

您可以在 addEventListener 方法中使用 notificationclick 事件

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("/");
      }),
  );
});

或使用 onnotificationclick 事件处理程序属性

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("/");
      }),
  );
};

您可以在 notificationclick 事件处理程序中使用 event.action 处理事件动作

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,
);

规范

规范
通知 API 标准
# activating-a-notification
通知 API 标准
# dom-serviceworkerglobalscope-onnotificationclick

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅