ServiceWorker: 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.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

postMessage() は ServiceWorker インターフェイスのメソッドで、ワーカーにメッセージを送信します。第一引数はワーカーに送信するデータです。このデータは、構造化クローンアルゴリズムで処理することができる任意の JavaScript オブジェクトにすることができます。

サービスワーカーは postMessage() メソッドを使用して、クライアントに情報を送り返すことができます。メッセージはこの ServiceWorker オブジェクトではなく、関連する ServiceWorkerContainer に返送されます。これはnavigator.serviceWorker から利用できます。

構文

postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

引数

message

ワーカーに配信するオブジェクトです。これは message イベントに配信されるイベントの data フィールドに入ります。これは構造化クローンアルゴリズムによって扱える JavaScript オブジェクトであれば何でもかまいません。

message 引数は必須です。ワーカーに渡すデータが重要でない場合は、null または undefined を明示的に渡す必要があります。

transfer 省略可

オプションで、所有権を移譲する移譲可能なオブジェクトの配列を渡します。オブジェクトの所有権が移譲されると、そのオブジェクトは移譲元のコンテキストでは使用できなくなり、送信先のワーカーのみで利用できるようになります。

options 省略可

オプションのオブジェクトで、以下のプロパティがあります。

transfer 省略可: transfer 引数と同じ意味です。

返値

なし (undefined)。

例外

SyntaxError: message 引数が提供されていない場合に発行されます。

例

この例では、ServiceWorker を作成し、すぐにメッセージを送信しています。

navigator.serviceWorker.register("service-worker.js");

navigator.serviceWorker.ready.then((registration) => {
  registration.active.postMessage(
    "Test message sent immediately after creation",
  );
});

メッセージを受信するために、service-worker.js のサービスワーカーは、そのグローバルスコープで message イベントを待ち受けする必要があります。

// これは `service-worker.js` に記述する必要があります
addEventListener("message", (event) => {
  console.log(`Message received: ${event.data}`);
});

サービスワーカーは、postMessage() メソッドを用いてメインスレッドにメッセージを送り返すことができることに注意してください。これを受け取るには、メインスレッドは message オブジェクトの ServiceWorkerContainer イベントを待ち受けする必要があります。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser