ServiceWorkerGlobalScope：message 事件
注意：此功能仅在 Service Workers 中可用。
ServiceWorkerGlobalScope 接口的 message 事件在收到传入消息时发生。受控页面可以使用 ServiceWorker.postMessage() 方法向 Service Worker 发送消息。Service Worker 可以选择通过 Client.postMessage() 向对应的受控页面发送响应。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件类型
事件属性
继承自其父级 ExtendableEvent 的属性.
ExtendableMessageEvent.data只读-
返回事件的数据。它可以是任何数据类型。如果分发在
messageerror事件中，则该属性将为null。 ExtendableMessageEvent.origin只读-
返回发送消息的
Client的来源。 ExtendableMessageEvent.lastEventId只读-
在 Server-Sent Events 中，表示事件源的最后一个事件 ID。
ExtendableMessageEvent.source只读-
返回发送消息的
Client对象的引用。 ExtendableMessageEvent.ports只读-
返回包含代表关联消息通道的端口的
MessagePort对象的数组。
示例
在下面的示例中，一个页面通过 ServiceWorkerRegistration.active 获取了 ServiceWorker 对象的句柄，然后调用了它的 postMessage() 函数。
js
// main.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.addEventListener("message", (event) => {
// event is a MessageEvent object
console.log(`The service worker sent me a message: ${event.data}`);
});
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage("Hi service worker");
});
}
Service Worker 可以通过监听 message 事件来接收消息
js
// service-worker.js
addEventListener("message", (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
或者，脚本可以使用 onmessage 来监听消息
js
// service-worker.js
self.onmessage = (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
};
规范
| 规范 |
|---|
| Service Workers # eventdef-serviceworkerglobalscope-message |
| Service Workers # dom-serviceworkerglobalscope-onmessage |
浏览器兼容性
加载中…