ServiceWorkerGlobalScope: notificationclick イベント

Limited availability

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

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

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

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

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

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

構文

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

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

onnotificationclick = (event) => {};

イベント型

イベントプロパティ

祖先である 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
# activating-a-notification
Notifications API
# dom-serviceworkerglobalscope-onnotificationclick

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
notificationclick event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報