ServiceWorkerGlobalScope: событие message

Событие message интерфейса ServiceWorkerGlobalScope происходит при получении входящих сообщений. Страницы с контролируемым доступом могут использовать метод ServiceWorker.postMessage() для отправки сообщений сервис-воркерам. Сервис-воркер может, по желанию, отправить ответ обратно через Client.postMessage(), соответствующий контролируемой странице.

Это событие не может быть отменено и не «пузырится».

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

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

onmessage = (event) => {};

Объект ExtendableMessageEvent. Наследуется от ExtendableEvent.

Наследует свойства от родительского класса ExtendableEvent.

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

Возвращает данные события. Это может быть любой тип данных. Если отправлено в событии messageerror, свойство будет null.

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

Возвращает источник происхождения Client, отправившего сообщение.

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

Представляет, в событиях с серверной стороны, последний идентификатор события источника события.

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

Возвращает ссылку на объект Client, отправивший сообщение.

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

Возвращает массив, содержащий объекты MessagePort, представляющие порты ассоциированного канала сообщений.

В примере ниже страница получает доступ к объекту ServiceWorker через ServiceWorkerRegistration.active и затем вызывает его функцию postMessage().

// main.js
if (navigator.serviceWorker) {
  navigator.serviceWorker.register("service-worker.js");

  navigator.serviceWorker.addEventListener("message", (event) => {
    // event is a MessageEvent object
    console.log(`The service worker sent me a message: ${event.data}`);
  });

  navigator.serviceWorker.ready.then((registration) => {
    registration.active.postMessage("Hi service worker");
  });
}

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

// service-worker.js
addEventListener("message", (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});

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

// service-worker.js
self.onmessage = (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
};

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