ExtendableMessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年4月⁩.

ExtendableMessageEvent はサービスワーカー API のインターフェイスで、（別のコンテキストからのメッセージを ServiceWorkerGlobalScope で受信した時に）サービスワーカーで発生する message イベントのイベントオブジェクトを表し、このようなイベントの存続期間を延長します。

このインターフェイスは、ExtendableEvent インターフェイスを継承しています。

コンストラクター

ExtendableMessageEvent(): 新しい ExtendableMessageEvent オブジェクトのインスタンスを作成します。

プロパティ

親の ExtendableEvent からプロパティを継承しています。

ExtendableMessageEvent.data 読取専用: イベントのデータを返します。任意のデータ型が使用できます。
ExtendableMessageEvent.origin 読取専用: メッセージを送信した Client のオリジンを返します。
ExtendableMessageEvent.lastEventId 読取専用: サーバー送信イベントにおける、イベントソースの最後のイベント ID を表します。これは空文字列です。
ExtendableMessageEvent.source 読取専用: メッセージを送信した Client オブジェクトへの参照を返します。
ExtendableMessageEvent.ports 読取専用: 関連するメッセージチャンネルのポートを表す MessagePort オブジェクトを含む配列を返します。

メソッド

親の ExtendableEvent からメソッドを継承しています。

例

以下の例では、ページが ServiceWorkerRegistration.active を介して ServiceWorker オブジェクトへのハンドルを取得し、その postMessage() 関数を呼び出します。

// 制御されているページ内
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event は MessageEvent オブジェクトです
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}

サービスワーカーは次のようにして、 message イベントを待ち受けしてメッセージを受信できます。

// サービスワーカー内
addEventListener("message", (event) => {
  // event は ExtendableMessageEvent オブジェクトです
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});