ServiceWorker.postMessage()

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

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

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

構文

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

引数

message

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

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

options 省略可

オプションのオブジェクトで、transfer フィールドに所有権を移譲するための移譲可能オブジェクトの配列を格納したものです。

transfer 省略可

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

移譲可能なオブジェクトとは、ArrayBuffer、MessagePort、ImageBitmap などのクラスのインスタンスであり、移譲可能なオブジェクトです。transfer の値として、null は受け入れられません。

メモ: パラメータ options と 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.s`` になる
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