ServiceWorkerGlobalScope: событие notificationclick

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

Безопасный контекст: Эта функция доступна только в безопасных контекстах (HTTPS), в некоторых или всех поддерживающих браузерах.

Примечание: Эта функция доступна только в Service Workers.

Событие notificationclick интерфейса ServiceWorkerGlobalScope срабатывает, чтобы указать, что системное уведомление, созданное с помощью ServiceWorkerRegistration.showNotification(), было нажато.

Уведомления, созданные на основном потоке или в работниках, которые не являются service workers, с помощью конструктора Notification(), вместо этого получат событие click на объекте Notification самом.

Это событие не отменяется и не распространяется.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

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

onnotificationclick = (event) => {};

Тип события

A NotificationEvent. Наследует от ExtendableEvent и Event.

Свойства события

Наследует свойства от своих предков, ExtendableEvent и Event.

NotificationEvent.notification Только для чтения: Возвращает объект Notification, представляющий уведомление, которое было нажато для срабатывания события.
NotificationEvent.action Только для чтения: Возвращает строковый идентификатор кнопки уведомления, на которую нажал пользователь. Это значение возвращает пустую строку, если пользователь нажал на уведомление в месте, отличном от кнопки действия, или если уведомление не имеет кнопки.

Примеры

Вы можете использовать событие notificationclick в методе addEventListener:

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:

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

Обработку действий события можно выполнить с помощью event.action в обработчике события notificationclick:

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

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`notificationclick_event`	40	17	44	24	16 Уведомления поддерживаются в macOS Ventura и более поздних версиях.	40	44	27	Нет	4.0	40

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event