ExtendableMessageEvent
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");
});
仕様書
Specification |
---|
Service Workers # extendablemessageevent-interface |
ブラウザーの互換性
BCD tables only load in the browser