ServiceWorkerContainer: message イベント

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

message イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。

このイベントはキャンセル不可で、バブリングしません。

構文

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

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

onmessage = (event) => {};

イベント型

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

Event MessageEvent

イベントプロパティ

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

MessageEvent.data 読取専用

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

MessageEvent.origin 読取専用

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

MessageEvent.lastEventId 読取専用

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

MessageEvent.source 読取専用

MessageEventSourceWindowProxyMessagePortServiceWorker の何れかのオブジェクト)で、メッセージの送信元を表します。

MessageEvent.ports 読取専用

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

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

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

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

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

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

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

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

仕様書

Specification
Service Workers
# dom-serviceworkercontainer-onmessage

ブラウザーの互換性

BCD tables only load in the browser

関連情報