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

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年8月24日 by MDN contributors.

View this page on GitHub • Report a problem with this content

Client
インスタンスプロパティ
インスタンスメソッド
1. postMessage()

Client: postMessage() メソッド

In this article

構文

引数

返値

例

仕様書

ブラウザーの互換性

Help improve MDN