Client.postMessage()

postMessage() は Client インターフェイスのメソッドで、サービスワーカーがクライアント (Window, Worker, SharedWorker) にメッセージを送信することができます。メッセージは、 navigator.serviceWorker の "message" イベントで受信されます。

構文

client.postMessage(message[, transfer]);
client.postMessage(message[, { transfer }]);

引数

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

返値

undefined。

例

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

addEventListener('fetch', event => {
  event.waitUntil(async function() {
    // クライアントにアクセスできない場合は、早期に終了します。
    // 例えば、クロスオリジンの場合。
    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