Client: phương thức postMessage()

Cú pháp

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

Tham số

message

Thông điệp sẽ được gửi tới client. Đây có thể là bất kỳ kiểu có thể nhân bản theo structured clone nào.

Note: Service worker không nằm trong cùng cụm agent với client của nó, vì vậy chúng không thể chia sẻ bộ nhớ. Các đối tượng SharedArrayBuffer hoặc các buffer view dựa trên chúng không thể được gửi qua các cụm agent. Nếu cố làm vậy, phía nhận sẽ phát sinh sự kiện messageerror chứa một DOMException DataCloneError.

transfer Optional

Một mảng tùy chọn gồm các đối tượng có thể chuyển giao để chuyển quyền sở hữu. Quyền sở hữu các đối tượng này được chuyển cho phía đích và chúng không còn sử dụng được ở phía gửi. Các đối tượng có thể chuyển giao này nên được đính kèm vào thông điệp; nếu không, chúng sẽ bị chuyển đi nhưng thực tế không thể truy cập được ở phía nhận.

options Optional

Một đối tượng tùy chọn chứa các thuộc tính sau:

transfer Optional

Có cùng ý nghĩa với tham số transfer.

Giá trị trả về

Không có (undefined).

Ví dụ

Đoạn mã dưới đây gửi một thông điệp từ service worker tới client. Client được lấy bằng phương thức get() trên clients, vốn là một biến toàn cục trong phạm vi service worker.

addEventListener("fetch", (event) => {
  event.waitUntil(
    (async () => {
      // Thoát sớm nếu không thể truy cập client.
      // Ví dụ: nếu khác nguồn gốc.
      if (!event.clientId) return;

      // Lấy client.
      const client = await self.clients.get(event.clientId);
      // Thoát sớm nếu không lấy được client.
      // Ví dụ: nếu nó đã đóng.
      if (!client) return;

      // Gửi một thông điệp tới client.
      client.postMessage({
        msg: "Hey I just got a fetch from you!",
        url: event.request.url,
      });
    })(),
  );
});

Nhận thông điệp đó:

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

Thông số kỹ thuật

Khả năng tương thích với trình duyệt