index.md

title	slug	l10n
NotificationEvent	Web/API/NotificationEvent	sourceCommit aa8fa82a902746b0bd97839180fc2b5397088140

{{APIRef("Web Notifications")}}{{AvailableInWorkers("service")}}

NotificationEvent は{{domxref("Notifications API", "通知 API", "", "nocode")}}のインターフェイスで、サービスワーカー ({{domxref("ServiceWorker")}}) の {{domxref("ServiceWorkerGlobalScope")}} で配信される通知イベントを表します。

このインターフェイスは {{domxref("ExtendableEvent")}} インターフェイスを継承しています。

メモ: {{domxref("ServiceWorkerGlobalScope")}} オブジェクトで発行される持続的な通知イベントのみが、NotificationEventインターフェイスを実装します。{{domxref("Notification")}} オブジェクトで発行される非持続的な通知イベントは、Eventインターフェイスを実装します。

{{InheritanceDiagram}}

コンストラクター

• {{domxref("NotificationEvent.NotificationEvent","NotificationEvent()")}}
  • : 新しい NotificationEvent オブジェクトを作成します。

インスタンスプロパティ

親インターフェイスである {{domxref("ExtendableEvent")}} から継承したプロパティもあります。

• {{domxref("NotificationEvent.notification")}} {{ReadOnlyInline}}
  • : イベントを発生させるためにクリックされた通知を表す {{domxref("Notification")}} オブジェクトを返します。
• {{domxref("NotificationEvent.action")}} {{ReadOnlyInline}}
  • : ユーザーがクリックした通知ボタンの文字列 ID を返します。ユーザーがアクションボタン以外の場所で通知をクリックした場合、または通知にボタンがない場合、この値は空の文字列を返します。

インスタンスメソッド

親インターフェイスである {{domxref("ExtendableEvent")}} から継承したメソッドもあります。

例

self.addEventListener("notificationclick", (event) => {
  console.log(`On notification click: ${event.notification.tag}`);
  event.notification.close();

  // これは、現在のページが既に開いているかどうかを確認し、
  // そうならばフォーカスします
  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("/");
      }),
  );
});

仕様書

{{Specifications}}

Note

このインターフェイスは通知 API で定義されていますが、{{domxref("ServiceWorkerGlobalScope")}} を通してアクセスします。

ブラウザーの互換性

{{Compat}}