BroadcastUpdatePlugin

BroadcastUpdatePlugin — это мощный инструмент библиотеки Workbox, предназначенный для уведомления приложения о том, что кэшированные ресурсы были обновлены. Этот плагин интегрируется с сервис-воркерами и позволяет реализовать реактивное обновление данных без необходимости полной перезагрузки страницы.

Основные возможности

  • Отслеживание изменений ресурсов: Плагин отслеживает обновления файлов в кэше, такие как HTML, CSS, JS, изображения или любые другие ассеты.
  • Отправка уведомлений: После обновления ресурса плагин отправляет сообщение через BroadcastChannel, которое может быть перехвачено на клиентской стороне.
  • Интеграция с различными стратегиями кэширования: Работает совместно с StaleWhileRevalidate, CacheFirst, NetworkFirst и другими стратегиями Workbox.
  • Поддержка пользовательских фильтров: Позволяет фильтровать уведомления по типу ресурса или условию, чтобы уведомлять только о нужных изменениях.

Установка и подключение

Для использования BroadcastUpdatePlugin необходимо установить Workbox через npm или подключить его через CDN. При npm:

import { BroadcastUpdatePlugin } from 'workbox-broadcast-update';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';

Затем создается маршрут для кэширования ресурсов с добавлением плагина:

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'js-cache',
    plugins: [
      new BroadcastUpdatePlugin({
        channelName: 'js-updates',
        headersToCheck: ['ETag', 'Last-Modified'],
      }),
    ],
  })
);

Пояснение параметров:

  • channelName — имя канала для отправки сообщений. Оно должно совпадать с каналом на клиентской стороне для корректного получения уведомлений.
  • headersToCheck — массив заголовков, которые плагин будет использовать для определения обновлений. Обычно это ETag или Last-Modified.

Получение уведомлений на клиенте

На клиентской стороне используется API BroadcastChannel для получения сообщений о обновленных ресурсах:

const channel = new BroadcastChannel('js-updates');

channel.addEventListener('message', (event) => {
  const { cacheName, updatedURL } = event.data;
  console.log(`Ресурс обновлен в кэше ${cacheName}: ${updatedURL}`);
  // Здесь можно реализовать логику обновления UI или перезагрузки данных
});

Сообщения содержат следующую структуру:

  • cacheName — имя кэша, где произошло обновление.
  • updatedURL — URL обновленного ресурса.
  • oldResponse и newResponse — объекты ответа до и после обновления (если необходим доступ к данным).

Фильтрация уведомлений

BroadcastUpdatePlugin позволяет фильтровать уведомления через метод filter. Например, уведомлять только о JS-файлах:

new BroadcastUpdatePlugin({
  channelName: 'js-updates',
  filter: ({ request, oldResponse, newResponse }) => {
    return request.destination === 'script';
  },
});

Это удобно для исключения из уведомлений изображений, CSS или других статических файлов, которые не требуют немедленной реакции приложения.

Расширенные возможности

  • Объединение с Workbox ExpirationPlugin: Можно одновременно ограничивать количество кэшируемых версий файлов и получать уведомления о новых версиях.
  • Совместимость с background sync: В случае обновления ресурсов, можно инициировать синхронизацию данных с сервером через Background Sync.
  • Поддержка нескольких каналов: Один сервис-воркер может отправлять уведомления на разные каналы для различных типов ресурсов.

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

  1. Автообновление JS-бандлов: После развертывания новой версии фронтенда клиент получает уведомление и может автоматически перезагрузить скрипты без полной перезагрузки страницы.
  2. Обновление изображений на сайте: Пользователь видит новые изображения в галерее без необходимости перезапускать приложение.
  3. Индикация свежих данных: Приложения, работающие с кэшированными API-запросами, могут показывать уведомление о том, что доступна новая версия данных.

Особенности работы

  • Плагин не инициирует автоматическое обновление кэша — он лишь уведомляет о том, что ресурс был обновлен.
  • Уведомления могут приходить несколько раз, если ресурс перезаписывается повторно.
  • Для корректной работы рекомендуется использовать строгую версионизацию файлов или заголовки ETag/Last-Modified.

BroadcastUpdatePlugin обеспечивает гибкую и мощную систему уведомлений о кэшированных ресурсах, делая взаимодействие приложения с пользователем более динамичным и отзывчивым.

Оглавление