ServiceWorkerGlobalScope: notificationclick イベント

Limited availability

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

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はサービスワーカー内でのみ利用可能です。

notificationclick は ServiceWorkerGlobalScope インターフェイスのイベントで、 ServiceWorkerRegistration.showNotification() によって生み出されたシステム通知がクリックされたことを示すために発生します。

メインスレッドまたは Notification() コンストラクターを使用するサービスワーカーではないワーカーで作成された通知は、click イベントを代わりに Notification オブジェクト自体で受け取ります。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onnotificationclick = (event) => {};

イベント型

NotificationEvent です。ExtendableEvent および Event を継承しています。

Event ExtendableEvent NotificationEvent

イベントプロパティ

祖先である ExtendableEvent および Event からプロパティを継承しています。

NotificationEvent.notification 読取専用

クリックされイベントが発行された通知を表す Notification オブジェクトを返します。

NotificationEvent.action 読取専用

ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。

例

notificationclick イベントは addEventListener メソッド内で使用することができます。

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

イベントのアクションは event.action を使って notificationclick イベントハンドラーの中で処理することができます。

js
navigator.serviceWorker.register("sw.js");
Notification.requestPermission().then((result) => {
  if (result === "granted") {
    navigator.serviceWorker.ready.then((registration) => {
      // Archive というタイトルのアクションを含んだ通知を表示します。
      registration.showNotification("New mail from Alice", {
        actions: [
          {
            action: "archive",
            title: "Archive",
          },
        ],
      });
    });
  }
});

self.addEventListener(
  "notificationclick",
  (event) => {
    event.notification.close();
    if (event.action === "archive") {
      // ユーザーが [Archive] アクションを選択しました。
      archiveEmail();
    } else {
      // ユーザーが通知本文を選択（例：クリック）した。
      clients.openWindow("/inbox");
    }
  },
  false,
);

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報