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() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onnotificationclick = (event) => {};

イベント型

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

イベントプロパティ

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

NotificationEvent.notification 読取専用: クリックされイベントが発行された通知を表す Notification オブジェクトを返します。
NotificationEvent.action 読取専用: ユーザーがクリックした通知ボタンの文字列 ID を返します。この値は、ユーザーがアクションボタン以外のどこかで通知をクリックした場合、またはその通知にボタンがなかった場合、空文字列を返します。

例

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) => {
      // 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,
);