ServiceWorker: postMessage() メソッド
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
postMessage()
は ServiceWorker
インターフェイスのメソッドで、ワーカーにメッセージを送信します。第一引数はワーカーに送信するデータです。このデータは、構造化クローンアルゴリズムで処理することができる任意の JavaScript オブジェクトにすることができます。
サービスワーカーは postMessage()
メソッドを使用して、クライアントに情報を送り返すことができます。メッセージはこの ServiceWorker
オブジェクトではなく、関連する ServiceWorkerContainer
に返送されます。これはnavigator.serviceWorker
から利用できます。
構文
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
引数
message
-
ワーカーに配信するオブジェクトです。これは
message
イベントに配信されるイベントのdata
フィールドに入ります。これは 構造化クローンアルゴリズム によって扱える JavaScript オブジェクトであれば何でもかまいません。message
引数は必須です。ワーカーに渡すデータが重要でない場合は、null
またはundefined
を明示的に渡す必要があります。 transfer
省略可-
オプションで、所有権を移譲する移譲可能なオブジェクトの配列を渡します。オブジェクトの所有権が移譲されると、そのオブジェクトは移譲元のコンテキストでは使用できなくなり、送信先のワーカーのみで利用できるようになります。
options
省略可-
オプションのオブジェクトで、以下のプロパティがあります。
transfer
省略可-
transfer
引数と同じ意味です。
返値
なし (undefined
)。
例外
SyntaxError
-
message
引数が提供されていない場合に発行されます。
例
この例では、ServiceWorker
を作成し、すぐにメッセージを送信しています。
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage(
"Test message sent immediately after creation",
);
});
メッセージを受信するために、service-worker.js
のサービスワーカーは、そのグローバルスコープで message
イベントを待ち受けする必要があります。
// これは `service-worker.js` に記述する必要があります
addEventListener("message", (event) => {
console.log(`Message received: ${event.data}`);
});
サービスワーカーは、postMessage()
メソッドを用いてメインスレッドにメッセージを送り返すことができることに注意してください。これを受け取るには、メインスレッドは message
オブジェクトの ServiceWorkerContainer
イベントを待ち受けする必要があります。
仕様書
Specification |
---|
Service Workers # dom-serviceworker-postmessage |
Service Workers # dom-serviceworker-postmessage-message-options |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 所属先の
ServiceWorker
インターフェイス。 - 反対側の
postMessage()
メソッドは、サービスワーカーがメッセージを関連するServiceWorkerContainer
に送り返すために使用する必要があるものです。