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