ServiceWorkerContainer: message イベント

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

この例では、サービスワーカーは 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 worker の使用
• サービスワーカーの基本的なコード例（英語）
• ServiceWorker の準備はできていますか？（英語）
• Web worker の使用