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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.