Client.postMessage()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Client 接口的 Client.postMessage() 方法允许一个 service worker 客户端向一个 ServiceWorker发送一个消息，会触发 service worker 的 message 事件，通过监听这个事件，可以获取这个消息。

语法

js
Client.postMessage(message[, transfer]);

返回

Void.

参数

message

发送给 service worker 的消息内容。

transfer 可选

可转移的对象，例如对端口的引用。

例子

从 service worker 向 client 发送消息：

js
addEventListener("fetch", (event) => {
  event.waitUntil(
    (async function () {
      // 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 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,
      });
    })(),
  );
});

接收 message:

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

Specifications

Specification
Service Workers
# dom-client-postmessage-message-options

Browser compatibility

BCD tables only load in the browser