Client: postMessage() メソッド
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月.
postMessage() は Client インターフェイスのメソッドで、サービスワーカーがクライアント (Window, Worker, SharedWorker) にメッセージを送信することができます。メッセージは、navigator.serviceWorker の "message" イベントで受信されます。
構文
js
postMessage(message) postMessage(message, transferables) 引数
message-
クライアントに送信するメッセージです。これは、任意の構造化複製可能型にすることができます。
transfer省略可-
メッセージとともに転送されるオブジェクトのシーケンスです。 これらのオブジェクトの所有権は宛先側に与えられ、送信側では使用できなくなります。
返値
なし (undefined)。
例
サービスワーカーからクライアントへのメッセージの送信
js
addEventListener("fetch", (event) => { event.waitUntil( (async () => { // クライアントにアクセスできない場合は、早期に終了します。 // 例えば、クロスオリジンの場合。 if (!event.clientId) return; // クライアントを取得します。 const client = await clients.get(event.clientId); // クライアントを取得できない場合は、早期に終了します。 // 例えば、閉じている場合。 if (!client) return; // クライアントにメッセージを送信します。 client.postMessage({ msg: "私はあなたからフェッチされましたよ！", url: event.request.url, }); })(), ); }); そのメッセージの受け取り
js
navigator.serviceWorker.addEventListener("message", (event) => { console.log(event.data.msg, event.data.url); }); 仕様書
| Specification |
|---|
| Service Workers Nightly # dom-client-postmessage-message-options |