ServiceWorkerContainer: message 事件

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在一些或所有支持的浏览器中可用。

注意：此功能在Web Workers中可用。

message 事件用于在受 service worker 控制的页面中接收来自 service worker 的消息。

此事件不可取消，也不会冒泡。

语法

在诸如addEventListener()之类的事件方法中使用事件名，或设置事件处理程序属性。

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

事件类型

一个MessageEvent。继承自Event。

Event MessageEvent

事件属性

此接口还从其父级Event继承属性。

MessageEvent.data 只读

消息发射器发送的数据。

MessageEvent.origin 只读

表示消息发射器来源的字符串。

MessageEvent.lastEventId 只读

表示事件唯一 ID 的字符串。

MessageEvent.source 只读

一个MessageEventSource（可以是WindowProxy、MessagePort或ServiceWorker对象），表示消息发射器。

MessageEvent.ports 只读

一个MessagePort对象的数组，表示与消息发送通过的通道关联的端口（在适当的情况下，例如在通道消息传递中或在向共享工作者发送消息时）。

示例

在此示例中，service worker 从fetch 事件获取客户端 ID，然后使用Client.postMessage向其发送消息

js
// service-worker.js
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("Hi client!");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});

客户端可以通过监听message 事件接收消息

js
// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});

或者，客户端可以使用onmessage 事件处理程序接收消息

js
// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};

规范

规范
Service Workers
# dom-serviceworkercontainer-onmessage

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见