ServiceWorkerContainer: событие message

Событие message используется на странице, управляемой сервисным рабочим, для получения сообщений от сервисного рабочего.

Это событие нельзя отменить и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("message", (event) => {});

onmessage = (event) => {};

A MessageEvent. Наследуется от Event.

Этот интерфейс также наследует свойства от родительского интерфейса Event.

MessageEvent.data Только для чтения

Данные, отправленные отправителем сообщения.

MessageEvent.origin Только для чтения

Строка, представляющая происхождение отправителя сообщения.

MessageEvent.lastEventId Только для чтения

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

MessageEvent.source Только для чтения

Объект MessageEventSource (который может быть объектом WindowProxy, MessagePort или ServiceWorker), представляющий отправителя сообщения.

MessageEvent.ports Только для чтения

Массив объектов MessagePort, представляющих порты, связанные с каналом, через который отправляется сообщение (если это применимо, например, при обмене сообщениями через канал или при отправке сообщения в общий рабочий процесс).

В этом примере сервисный рабочий получает идентификатор клиента из события fetch и затем отправляет ему сообщение с помощью Client.postMessage:

// service-worker.js
async function messageClient(clientId) {
  const client = await clients.get(clientId);
  client.postMessage("Hi client!");
}

addEventListener("fetch", (event) => {
  messageClient(event.clientId);
  event.respondWith(() => {
    // …
  });
});

Клиент может получить сообщение, прослушивая событие message:

// main.js
navigator.serviceWorker.addEventListener("message", (message) => {
  console.log(message);
});

В качестве альтернативы, клиент может получить сообщение с помощью обработчика события onmessage:

// main.js
navigator.serviceWorker.onmessage = (message) => {
  console.log(message);
};

• Использование сервисных рабочих
• Базовый пример кода сервисных рабочих
• Использование веб-воркеров