Workbox и Nuxt.js

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

Установка и настройка

В Nuxt.js интеграция Workbox чаще всего выполняется через модуль @nuxt/pwa, который упрощает настройку сервис-воркеров.

npm install @nuxt/pwa

В nuxt.config.js необходимо подключить модуль и настроить Workbox:

export default {
  modules: [
    '@nuxt/pwa',
  ],
  pwa: {
    workbox: {
      // Автоматическая регистрация сервис-воркера
      autoRegister: true,
      // Стратегии кэширования
      runtimeCaching: [
        {
          urlPattern: 'https://fonts.googleapis.com/.*',
          handler: 'CacheFirst',
          method: 'GET',
          strategyOptions: {
            cacheName: 'google-fonts-cache',
            cacheExpiration: { maxEntries: 20, maxAgeSeconds: 60 * 60 * 24 * 30 },
          },
        },
        {
          urlPattern: 'https://api.example.com/.*',
          handler: 'NetworkFirst',
          method: 'GET',
          strategyOptions: {
            cacheName: 'api-cache',
            cacheExpiration: { maxEntries: 50, maxAgeSeconds: 60 * 60 },
          },
        },
      ],
      // Оптимизация precache
      precaching: [
        { url: '/offline.html', revision: '1' },
      ],
    },
  },
}

Ключевые моменты настройки:

  • runtimeCaching управляет кэшированием динамических ресурсов.
  • handler определяет стратегию кэширования (CacheFirst, NetworkFirst, StaleWhileRevalidate и др.).
  • strategyOptions задают параметры хранения кэша: cacheName, maxEntries, maxAgeSeconds.
  • precache обеспечивает кэширование критических ресурсов для offline-доступа.

Стратегии кэширования

Workbox поддерживает несколько стратегий кэширования, каждая из которых имеет свое назначение:

  1. CacheFirst Сначала проверяет кэш, затем обращается к сети. Оптимально для статических ресурсов: шрифтов, изображений, библиотек.

  2. NetworkFirst Сначала пытается получить ресурс из сети, если неудачно — берет из кэша. Подходит для API и динамического контента.

  3. StaleWhileRevalidate Возвращает устаревший кэш мгновенно, а затем обновляет кэш в фоне. Подходит для UI-ресурсов, которые не требуют полной актуальности при каждом запросе.

  4. NetworkOnly / CacheOnly Чисто сетевой или кэшированный подход. Используется редко, но полезен для специфических случаев.

Пример использования нескольких стратегий одновременно:

workbox.routing.registerRoute(
  /.*\.(?:png|jpg|jpeg|svg|gif)/,
  new workbox.strategies.CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
    ],
  })
);

Динамическое кэширование API

Для API-запросов часто используется стратегия NetworkFirst, чтобы получать свежие данные, но при недоступной сети использовать кэш:

workbox.routing.registerRoute(
  /\/api\/.*\/*.json/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5,
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 60 * 60, // 1 час
      }),
    ],
  })
);
  • networkTimeoutSeconds задает максимальное время ожидания ответа от сети перед fallback на кэш.
  • Плагин ExpirationPlugin ограничивает объем кэша и время хранения.

Предварительное кэширование (Precache)

Workbox позволяет кэшировать заранее определенные ресурсы, которые будут доступны offline. В Nuxt.js это удобно для страниц, шаблонов и статических файлов.

workbox.precaching.precacheAndRoute([
  { url: '/offline.html', revision: '1' },
  { url: '/favicon.ico', revision: '1' },
]);
  • revision нужен для управления версиями ресурсов. При изменении ресурса необходимо обновить ревизию, чтобы сервис-воркер пересохранил новый файл.

Advanced: Пользовательские обработчики и плагины

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

const customPlugin = {
  cacheWillUpdate: async ({ response }) => {
    if (response.status === 200 && response.type === 'basic') {
      return response;
    }
    return null;
  },
};

workbox.routing.registerRoute(
  /\/custom-api\/.*/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'custom-api-cache',
    plugins: [customPlugin],
  })
);

Плагин проверяет статус ответа и тип ресурса перед сохранением в кэш, предотвращая кэширование ошибок или сторонних доменов.

Интеграция с Nuxt.js SPA и SSR

Для SPA Workbox автоматически регистрирует сервис-воркер, но для SSR и генерации статических сайтов (nuxt generate) необходимо удостовериться, что все предзагружаемые страницы добавлены в precache. Nuxt PWA модуль автоматизирует этот процесс через опцию workbox.preCaching.

Мониторинг и отладка

Workbox предоставляет инструменты для отладки:

  • workbox.setConfig({ debug: true }) — включает подробные логи.
  • workbox.core.skipWaiting() и workbox.core.clientsClaim() — помогают управлять обновлением сервис-воркера.
  • Проверка кэша в браузере через DevTools → Application → Cache Storage.
Оглавление