客户端：postMessage() 方法

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

postMessage() 是 Client 接口的方法，允许服务工作线程向客户端（Window、Worker 或 SharedWorker）发送消息。消息在 navigator.serviceWorker 上的“message”事件中接收。

语法

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

参数

message

要发送到客户端的消息。这可以是任何 结构化克隆类型。

transfer 可选

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

options 可选

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

transfer 可选

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

返回值

无 (undefined).

示例

以下代码从服务工作线程向客户端发送消息。客户端使用 get() 方法从 clients 中获取，这是一个服务工作线程范围内的全局变量。

js
addEventListener("fetch", (event) => {
  event.waitUntil(
    (async () => {
      // Exit early if we don't have access to the client.
      // Eg, if it's cross-origin.
      if (!event.clientId) return;

      // Get the client.
      const client = await self.clients.get(event.clientId);
      // Exit early if we don't get the client.
      // Eg, if it closed.
      if (!client) return;

      // Send a message to the client.
      client.postMessage({
        msg: "Hey I just got a fetch from you!",
        url: event.request.url,
      });
    })(),
  );
});

接收该消息

js
navigator.serviceWorker.addEventListener("message", (event) => {
  console.log(event.data.msg, event.data.url);
});

规范

规范
服务工作线程
# dom-client-postmessage-message-options

浏览器兼容性

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