Подключение через CDN

Для использования Workbox в проекте без настройки сборщика модулей можно подключить библиотеку напрямую через CDN. Такой подход особенно удобен для небольших проектов, прототипов или страниц, где не используется сборка через Webpack, Rollup или другие инструменты.

Основные CDN-сервисы

Workbox официально поддерживается на следующих CDN:

  • Google Hosted Libraries (GHL) Прямое подключение доступно по ссылке:

    <script src="https://storage.googleapis.com/workbox-cdn/releases/6.7.0/workbox-sw.js"></script>

  • unpkg Использование через unpkg позволяет загружать любую версию Workbox:

    <script src="https://unpkg.com/workbox-sw@6.7.0/build/workbox-sw.js"></script>

  • jsDelivr Также предоставляет возможность указать точную версию:

    <script src="https://cdn.jsdelivr.net/npm/workbox-sw@6.7.0/build/workbox-sw.js"></script>

Подключение в Service Worker

Workbox используется в основном в контексте Service Worker. Для подключения через CDN достаточно импортировать скрипт в файле sw.js:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.7.0/workbox-sw.js');

if (workbox) {
  console.log(`Workbox успешно загружен`);
} else {
  console.log(`Ошибка загрузки Workbox`);
}

importScripts выполняет синхронную загрузку библиотеки и делает её доступной в глобальном контексте Service Worker.

Настройка базовых стратегий кэширования

После подключения Workbox можно использовать его встроенные методы для регистрации стратегий кэширования. Например, кэширование статических ресурсов с помощью стратегии StaleWhileRevalidate:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
      })
    ]
  })
);

Для изображений можно применить стратегию CacheFirst с ограничением на количество кэшируемых файлов:

workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 дней
      })
    ]
  })
);

Импорт дополнительных модулей Workbox

Workbox предоставляет модули для разных задач: precaching, routing, strategies, background sync и т.д. Через CDN каждый модуль можно подключить с помощью отдельного скрипта или использовать весь пакет workbox-sw:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.7.0/workbox-routing.prod.js');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.7.0/workbox-strategies.prod.js');

Использование отдельных модулей позволяет уменьшить размер Service Worker, загружая только необходимые функции.

Предзагрузка ресурсов (Precaching)

Workbox позволяет автоматически кэшировать критические ресурсы на этапе установки Service Worker с помощью метода precacheAndRoute:

workbox.precaching.precacheAndRoute([
  { url: '/index.html', revision: '123456' },
  { url: '/styles/main.css', revision: '123456' },
  { url: '/scripts/main.js', revision: '123456' }
]);

revision используется для контроля версий и обновления кэша при изменении файлов.

Контроль версий и обновление

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

Советы по использованию CDN

  • Всегда указывать точную версию библиотеки.
  • Проверять доступность CDN в вашем регионе.
  • Использовать проверку if (workbox) для безопасного использования методов библиотеки.
  • Комбинировать precaching и runtime caching для оптимальной производительности.

Подключение Workbox через CDN обеспечивает быстрый старт работы с Service Worker, минимизирует настройки сборщика и позволяет гибко настраивать кэширование и стратегии обновления ресурсов.

Оглавление