Клиент: метод postMessage()

Метод postMessage() интерфейса Client позволяет сервисному рабочему отправлять сообщение клиенту (объекту Window, Worker или SharedWorker). Сообщение принимается в событии message объекта navigator.serviceWorker.

message

Сообщение для отправки клиенту. Это может быть любой объект, допускающий структурное клонирование.

transfer Необязательно

Необязательный массив объектов, подлежащих передаче. Владение этими объектами передаётся получающей стороне, и они больше не доступны на стороне отправки. Эти передаваемые объекты должны быть присоединены к сообщению; в противном случае они будут перемещены, но не станут доступными для получения на принимающей стороне.

options Необязательно

Необязательный объект, содержащий следующие свойства:

transfer Необязательно

Имеет то же значение, что и параметр transfer.

None (undefined).

Ниже приведен код, отправляющий сообщение из сервисного работника клиенту. Клиент извлекается с помощью метода get() объекта clients, который является глобальным в области видимости сервисного работника.

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,
      });
    })(),
  );
});

Получение этого сообщения:

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