ServiceWorker：postMessage() 方法

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

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

postMessage() 方法是 ServiceWorker 接口的一个方法，用于向工作线程发送消息。第一个参数是要发送到工作线程的数据。数据可以是任何 JavaScript 对象，这些对象可以由结构化克隆算法处理。

服务工作线程可以使用 postMessage() 方法将其信息发送回其客户端。消息不会发送回此 ServiceWorker 对象，而是发送到关联的 ServiceWorkerContainer，该容器可通过 navigator.serviceWorker 获取。

语法

js
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

参数

message

要传递给工作线程的对象；这将在传递到 message 事件的事件中的 data 字段中。这可以是任何由 结构化克隆算法 处理的 JavaScript 对象。

message 参数是必需的。如果要传递给工作线程的数据不重要，则必须显式传递 null 或 undefined。

transfer 可选

一个可选的 数组，其中包含要传输所有权的 可传输对象。这些对象的所有权将赋予目标方，并且在发送方不再可用。这些可传输对象应附加到消息；否则，它们将被移动，但实际上在接收端不可访问。

options 可选

一个包含以下属性的可选对象

transfer 可选

与 transfer 参数具有相同的含义。

返回值

无 (undefined)。

异常

SyntaxError

如果未提供 message 参数，则抛出此异常。

示例

在此示例中，创建了一个 ServiceWorker，并立即发送了一条消息

js
navigator.serviceWorker.register("service-worker.js");

navigator.serviceWorker.ready.then((registration) => {
  registration.active.postMessage(
    "Test message sent immediately after creation",
  );
});

为了接收消息，服务工作线程（在 service-worker.js 中）必须在其全局作用域上监听 message 事件。

js
// This must be in `service-worker.js`
addEventListener("message", (event) => {
  console.log(`Message received: ${event.data}`);
});

请注意，服务工作线程可以使用 postMessage() 方法将消息发送回主线程。要接收它，主线程需要在 ServiceWorkerContainer 对象上监听 message 事件。

规范

规范
Service Workers
# dom-serviceworker-postmessage
Service Workers
# dom-serviceworker-postmessage-message-options

浏览器兼容性

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

另请参阅