Workbox и Angular Service Worker

Workbox — это библиотека JavaScript для упрощения создания сервис-воркеров и кэширования ресурсов в веб-приложениях. В сочетании с Angular Service Worker она обеспечивает эффективное управление кэшированием, оффлайн-доступом и стратегиями обновления приложений.

Интеграция Workbox в Angular

Angular по умолчанию поддерживает сервис-воркеры через пакет @angular/service-worker. Для расширенной функциональности и тонкой настройки кэширования используется Workbox. Основные шаги интеграции:

  1. Установка Workbox:
npm install workbox-build workbox-webpack-plugin --save-dev
  1. Настройка angular.json для добавления сервис-воркера в процесс сборки:
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
  1. Конфигурация Workbox через workbox-config.js:
module.exports = {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{html,js,css,png,jpg,svg,json}'
  ],
  swDest: 'dist/sw.js',
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'images-cache',
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60
        }
      }
    },
    {
      urlPattern: /\/api\/.*\/*.json/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'api-cache',
        networkTimeoutSeconds: 5
      }
    }
  ]
};

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

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

  • Cache First — сначала проверяет кэш, если ресурс не найден, делает сетевой запрос. Идеально для изображений и статических файлов.
  • Network First — сначала пытается получить данные с сервера, при неудаче использует кэш. Подходит для динамического контента, API-запросов.
  • Stale While Revalidate — возвращает кэшированный ресурс, параллельно обновляя его с сервера. Используется для данных, где требуется быстрый отклик.
  • Network Only и Cache Only — специализированные стратегии, применяются редко, но полезны для полной гибкости.

Интеграция с Angular Service Worker

Angular Service Worker хранит конфигурацию в файле ngsw-config.json. Для работы с Workbox важно учитывать:

  • AssetGroups — группы статических ресурсов с указанием стратегий кэширования.
  • DataGroups — динамические данные, такие как API-запросы, с возможностью настройки таймаута и стратегии обновления.

Пример ngsw-config.json с расширенной интеграцией Workbox:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
      }
    },
    {
      "name": "images",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/images/**"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["/api/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "6h",
        "timeout": "10s"
      }
    }
  ]
}

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

  • Precaching — позволяет заранее кэшировать важные ресурсы, обеспечивая быстрый запуск приложения.
  • Background Sync — повторная отправка запросов при восстановлении сети. Особенно полезно для форм и операций оффлайн.
  • Routing — настраиваемая маршрутизация запросов через сервис-воркер, позволяющая применять разные стратегии к разным URL.
  • Plugins — набор встроенных расширений для кэширования, логирования и ограничения размера кэша.

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

import { BackgroundSyncPlugin } from 'workbox-background-sync';
import { registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('form-queue', {
  maxRetentionTime: 24 * 60
});

registerRoute(
  /\/api\/submit/,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

Тестирование и отладка

  • Workbox DevTools и консоль браузера позволяют проверить, какие ресурсы кэшируются, и какие стратегии применяются.
  • В Angular можно использовать команду ng build --prod и http-server для проверки работы оффлайн.
  • Логи сервис-воркера позволяют отслеживать запросы и обновления кэша, что особенно важно при динамическом контенте.

Практические рекомендации

  • Использовать CacheFirst для статических ресурсов и NetworkFirst для API.
  • Ограничивать размер кэша и срок хранения ресурсов, чтобы не перегружать браузер.
  • Всегда тестировать стратегию обновления, чтобы избежать отображения устаревших данных.
  • Интегрировать Workbox поверх Angular Service Worker только там, где требуется расширенный контроль над кэшированием и оффлайн-поддержкой.

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

Оглавление