ServiceWorkerContainer: messageerror 事件

基线 2023

新功能

自 2023 年 3 月起，此功能在最新的设备和浏览器版本上都能正常工作。此功能可能无法在旧设备或浏览器上正常工作。

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

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

当发送到关联工作程序的传入消息无法反序列化时，messageerror 事件将被触发到 ServiceWorkerContainer。

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

语法

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

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

onmessageerror = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

Event MessageEvent

事件属性

此接口还继承了其父类 Event 的属性。

MessageEvent.data 只读

由消息发射器发送的数据。

MessageEvent.origin 只读

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

MessageEvent.lastEventId 只读

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

MessageEvent.source 只读

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

MessageEvent.ports 只读

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

示例

在这个例子中，服务工作程序从一个 fetch 事件中获取客户端的 ID，然后使用 Client.postMessage 向它发送消息。

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

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

服务工作程序可以通过监听 messageerror 事件来监听消息反序列化错误。

js
// main.js
navigator.serviceWorker.addEventListener("messageerror", (event) => {
  console.error("Receive message from service worker failed!");
});

或者，脚本可以使用 onmessageerror 来监听消息反序列化错误。

js
// main.js
navigator.serviceWorker.onmessageerror = (event) => {
  console.error("Receive message from service worker failed!");
};

规范

规范
服务工作程序
# dom-serviceworkerglobalscope-onmessageerror

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅