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