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 April 2018.
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 # dom-client-postmessage-message-options |