ServiceWorkerContainer: message イベント

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

バブリング なし
キャンセル 不可
インターフェイス MessageEvent
イベントハンドラープロパティ onmessage

この例では、サービスワーカーは 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 イベントをリッスンしてメッセージを受信できます。

// 制御されているページ
navigator.serviceWorker.addEventListener('message', (message) => {
    console.log(message);
});

仕様

仕様 状態
Service Workers
message の定義
草案

ブラウザーの互換性

BCD tables only load in the browser

関連情報