MessageChannel и postMessage в Workbox

Workbox предоставляет удобные механизмы для работы с сервис-воркерами, включая эффективный обмен сообщениями между основным потоком страницы и сервис-воркером. Одним из ключевых инструментов является использование MessageChannel и метода postMessage для двунаправленной коммуникации.

Основы MessageChannel

MessageChannel — это стандартный API JavaScript, который создаёт канал связи между двумя контекстами (например, между страницей и сервис-воркером). Канал состоит из двух портов:

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;
  • port1 и port2 связаны между собой. Сообщение, отправленное в один порт, может быть получено через другой порт.
  • Это позволяет организовать асинхронный обмен данными без глобального состояния или событий window/message.

Использование postMessage в сервис-воркере

Метод postMessage позволяет передавать данные между клиентом и сервис-воркером. В Workbox он используется как часть более сложной архитектуры обмена сообщениями, например, при использовании Workbox Background Sync, Routing или Precaching.

Пример отправки сообщения из страницы в сервис-воркер:

if (navigator.serviceWorker.controller) {
  const channel = new MessageChannel();

  channel.port1.onmess age = (event) => {
    console.log('Ответ от сервис-воркера:', event.data);
  };

  navigator.serviceWorker.controller.postMessage(
    { type: 'PING' },
    [channel.port2]
  );
}

Здесь важно:

  • Сообщение включает объект { type: 'PING' }.
  • Порт port2 передается сервис-воркеру для двунаправленной связи.
  • port1 слушает события и получает ответ.

Обработка сообщений в Workbox сервис-воркере

Сервис-воркер, созданный через Workbox, может принимать сообщения через событие message. С помощью полученного порта можно отправить ответ обратно клиенту:

self.addEventListener('message', (event) => {
  if (!event.data || !event.ports) return;

  const port = event.ports[0];

  switch (event.data.type) {
    case 'PING':
      port.postMessage({ type: 'PONG', timestamp: Date.now() });
      break;
    case 'CACHE_STATUS':
      port.postMessage({ type: 'CACHE_STATUS', status: 'ok' });
      break;
    default:
      port.postMessage({ type: 'ERROR', message: 'Unknown command' });
  }
});

Особенности:

  • Доступ к порту через event.ports[0].
  • Ответы отправляются напрямую через этот порт, что предотвращает конфликт с другими клиентами.
  • Можно легко реализовать протокол обмена сообщениями с различными командами и данными.

Практические сценарии использования

  1. Проверка статуса кеша

С помощью postMessage и MessageChannel можно узнать состояние кеша Workbox:

navigator.serviceWorker.controller.postMessage(
  { type: 'CACHE_STATUS' },
  [channel.port2]
);

Сервис-воркер возвращает актуальные данные о кешированных ресурсах.

  1. Асинхронная синхронизация данных

При работе с Background Sync можно использовать канал сообщений для отправки подтверждений о выполнении операций, таких как сохранение данных на сервере.

  1. Взаимодействие с несколькими клиентами

Каждый клиент может открыть собственный MessageChannel, что позволяет отправлять ответы строго определённому клиенту, не мешая другим вкладкам.

Рекомендации по организации кода

  • Всегда проверять наличие event.ports перед использованием.
  • Использовать структурированные объекты для сообщений (type, payload) для облегчения расширения протокола.
  • При необходимости можно передавать Transferable объекты через postMessage для повышения производительности (например, ArrayBuffer).

Совместимость с Workbox

Workbox версии 6+ поддерживает прямую интеграцию с обменом сообщениями, позволяя комбинировать Routing, Precaching и Background Sync с каналами сообщений. Это создаёт архитектуру, где сервис-воркер становится полноценным контроллером ресурсов, а MessageChannel обеспечивает надёжное двунаправленное взаимодействие с клиентскими скриптами.

Использование MessageChannel и postMessage повышает гибкость управления сервис-воркером, улучшает масштабируемость приложений и позволяет реализовывать сложные сценарии синхронизации данных в PWA.

Оглавление