Client：postMessage() 方法
备注： 此特性仅在 Service Worker 中可用。
Client 接口的 postMessage() 方法允许 service worker 向客户端（Window、Worker 或 SharedWorker）发送消息。消息在 navigator.serviceWorker 上的 message 事件中接收。
语法
js
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
参数
message-
要发送给客户端的消息。可以是任何可结构化克隆的类型。
备注：service worker 与其客户端不在同一个代理集群中，因此不能共享内存。
SharedArrayBuffer对象，或以它为底层的缓冲区视图，不能跨代理集群发送。若尝试这样做，接收端会触发包含DataCloneErrorDOMException的messageerror事件。 transfer可选-
一个可选的可转移对象数组，用于转移这些对象的所有权。这些对象的所有权会交给目标端，发送端将无法再使用它们。这些可转移对象不会自动发送；它们必须包含在消息中，或者接收方能通过其他方式访问到它们，例如通过
MessageEvent.ports获取MessagePort。 options可选-
包含以下属性的可选对象：
transfer可选-
与
transfer参数含义相同。
返回值
无（undefined）。
示例
下面的代码从 service worker 向客户端发送消息。客户端通过 service worker 作用域中的全局对象 clients 上的 get() 方法获取。
js
addEventListener("fetch", (event) => {
event.waitUntil(
(async () => {
// 如果我们无法访问该客户端，则提前退出。
// 例如跨源时。
if (!event.clientId) return;
// 获取客户端。
const client = await self.clients.get(event.clientId);
// 如果没有拿到客户端，则提前退出。
// 例如它已关闭。
if (!client) return;
// 向客户端发送消息。
client.postMessage({
msg: "嘿，我刚收到你发来的 fetch！",
url: event.request.url,
});
})(),
);
});
接收该消息：
js
navigator.serviceWorker.addEventListener("message", (event) => {
console.log(event.data.msg, event.data.url);
});
规范
| 规范 |
|---|
| Service Workers Nightly # dom-client-postmessage-message-options |