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