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 |
瀏覽器相容性
載入中…