Client: postMessage() 方法
注意：此功能仅在 Service Workers 中可用。
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可选-
一个可选的可传输对象数组，用于转移所有权。这些对象的所有权将转移到目标方，并且它们在发送方不再可用。这些可传输对象应该附加到消息中；否则它们将被移动，但在接收端实际上无法访问。
options可选-
一个包含以下属性的可选对象
transfer可选-
与
transfer参数具有相同的含义。
返回值
无（undefined）。
示例
下面的代码从 service worker 向客户端发送消息。客户端使用 service worker 作用域中的全局对象 clients 上的 get() 方法获取。
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);
});
规范
| 规范 |
|---|
| Service Workers # dom-client-postmessage-message-options |
浏览器兼容性
加载中…