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" イベントで受信されます。

構文

postMessage(message)
postMessage(message, transferables)

引数

message: クライアントに送信するメッセージです。これは、任意の構造化複製可能型にすることができます。
transfer 省略可: メッセージとともに転送されるオブジェクトのシーケンスです。これらのオブジェクトの所有権は宛先側に与えられ、送信側では使用できなくなります。

返値

なし (undefined)。

例

サービスワーカーからクライアントへのメッセージの送信

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,
      });
    })(),
  );
});

そのメッセージの受け取り

navigator.serviceWorker.addEventListener("message", (event) => {
  console.log(event.data.msg, event.data.url);
});

仕様書

Specification
Service Workers # dom-client-postmessage-message-options

ブラウザーの互換性

BCD tables only load in the browser