ServiceWorkerContainer: message イベント

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("message", (event) => {});

onmessage = (event) => {};

MessageEvent です。 Event を継承しています。

このインターフェイスは親である Event からプロパティを継承しています。

MessageEvent.data 読取専用

メッセージ送信元によって送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信元のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの一意の ID を表します。

MessageEvent.source 読取専用

MessageEventSource （WindowProxy、MessagePort、ServiceWorker の何れかのオブジェクト）で、メッセージの送信元を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します（チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合）。

この例では、サービスワーカーは fetch イベントからクライアントの ID を取得し、Client.postMessage を使用してメッセージを送信します。

// サービスワーカー内
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage('こんにちはクライアント！');
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});

クライアントは message イベントを待ち受けしてメッセージを受信できます。

// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});

あるいは、クライアントは onmessage イベントハンドラーでメッセージを受信することもできます。

// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};

• サービスワーカーの使用
• サービスワーカーの基本的なコード例
• ServiceWorker の準備はできていますか？（英語）
• ウェブワーカーの使用