ExtendableMessageEvent

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

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

コンストラクター

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

プロパティ

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

ExtendableMessageEvent.data 読取専用
イベントのデータを返します。 任意のデータ型を使用できます。
ExtendableMessageEvent.origin 読取専用
メッセージを送信した Client のオリジンを返します。
ExtendableMessageEvent.lastEventId 読取専用
サーバー送信イベント(server-sent events)で、イベントソースの最後のイベント 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");
});

仕様

仕様 状態 コメント
Service Workers
ExtendableMessageEvent の定義
草案 初期定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報