ServiceWorkerGlobalScope: message event
ServiceWorkerGlobalScope
インターフェイスの message
イベントは、着信メッセージを受信したときに発生します。 制御されたページは、ServiceWorker.postMessage()
メソッドを使用して、サービスワーカーにメッセージを送信できます。
サービスワーカーは、任意で、制御されたページに対応する Client.postMessage()
を介して返信することができます。
バブリング | なし |
---|---|
キャンセル | 不可 |
インターフェイス | ExtendableMessageEvent |
イベントハンドラープロパティ | onmessage |
例
以下の例では、ページが ServiceWorkerRegistration.active
を介して ServiceWorker
オブジェクトへのハンドルを取得し、その postMessage()
関数を呼び出します。
// 制御されているページ内
if (navigator.serviceWorker) {
navigator.serviceWorker.register('service-worker.js');
navigator.serviceWorker.addEventListener('message', event => {
// event は MessageEvent オブジェクトです
console.log(`The service worker sent me a message: ${event.data}`);
});
navigator.serviceWorker.ready.then( registration => {
registration.active.postMessage("Hi service worker");
});
}
次のように、サービスワーカーは、message
イベントをリッスンしてメッセージを受信できます。
// サービスワーカー内
addEventListener('message', event => {
// event は ExtendableMessageEvent オブジェクトです
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
仕様
仕様 | 状態 |
---|---|
Service Workers message の定義 |
草案 |
ブラウザーの互換性
BCD tables only load in the browser