--- title: 'ServiceWorkerContainer: message イベント' slug: Web/API/ServiceWorkerContainer/message_event tags: - API - Event - Reference - Service Workers - ServiceWorkerContainer translation_of: Web/API/ServiceWorkerContainer/message_event ---
{{APIRef}}

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

バブリング なし
キャンセル 不可
インターフェイス {{domxref("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);
});

仕様

仕様 状態
{{SpecName('Service Workers', '#dom-serviceworkercontainer-onmessage', 'message')}} {{Spec2('Service Workers')}}

ブラウザーの互換性

{{Compat("api.ServiceWorkerContainer.message_event")}}

関連情報