Концепция стратегий и их назначение

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

Основные типы стратегий

1. Cache First Стратегия CacheFirst проверяет наличие ресурса в кэше перед выполнением сетевого запроса. Если ресурс найден в кэше, он возвращается немедленно; сетевой запрос выполняется только при отсутствии кешированной версии.

Используется для:

  • Статических ресурсов, редко обновляющихся (изображения, шрифты, библиотеки JavaScript и CSS).
  • Сокращения времени загрузки и уменьшения сетевых запросов.

Пример реализации:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60 })
    ],
  })
);

2. Network First Стратегия NetworkFirst сначала пытается получить ресурс из сети. Если сетевой запрос не удался (например, отсутствует соединение), используется кэш.

Применение:

  • Динамические данные, требующие актуальности (новостные ленты, API-запросы).
  • Подходит для приложений с частым обновлением контента.
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 5,
    plugins: [
      new ExpirationPlugin({ maxEntries: 30, maxAgeSeconds: 5 * 60 })
    ]
  })
);

3. Stale While Revalidate Стратегия StaleWhileRevalidate возвращает кэшированную версию ресурса немедленно и параллельно обновляет её из сети. Это обеспечивает быстрый ответ и одновременно поддерживает актуальность данных.

Применение:

  • Часто используемые ресурсы, где важна скорость отклика и не критично минимальное устаревание данных.
import { StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

4. Cache Only и Network Only Стратегии CacheOnly и NetworkOnly обеспечивают строгое использование одного источника.

  • CacheOnly — возвращает ресурс исключительно из кэша, без сетевых запросов.
  • NetworkOnly — всегда делает запрос к сети, игнорируя кэш.

Используются для:

  • Жестко контролируемых ресурсов или временных сценариев, когда доступ к сети/кэшу критичен.

Расширение стратегий с помощью плагинов

Плагины Workbox позволяют добавлять дополнительное поведение к стратегиям:

  • ExpirationPlugin — ограничивает количество элементов и срок хранения в кэше.
  • CacheableResponsePlugin — позволяет кэшировать только успешные ответы с указанными статусами.
  • BroadcastUpdatePlugin — отправляет уведомления клиентам при обновлении кэшированных ресурсов.
  • BackgroundSyncPlugin — обеспечивает повторную отправку запросов при восстановлении соединения.

Пример комплексной конфигурации стратегии:

import { NetworkFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const apiStrategy = new NetworkFirst({
  cacheName: 'dynamic-api',
  networkTimeoutSeconds: 3,
  plugins: [
    new CacheableResponsePlugin({ statuses: [200] }),
    new ExpirationPlugin({ maxEntries: 20, maxAgeSeconds: 300 })
  ]
});

Правила выбора стратегии

  • Статика → CacheFirst: изображения, шрифты, библиотеки.
  • Динамика → NetworkFirst: API, новости, данные пользователя.
  • Смешанные сценарии → StaleWhileRevalidate: ресурсы с частыми обращениями, где важен быстрый отклик и не критична небольшая задержка обновления.
  • Контролируемый доступ → CacheOnly / NetworkOnly: специализированные сценарии, где необходим жесткий источник.

Влияние стратегий на производительность

Стратегии напрямую влияют на:

  • Скорость загрузки: кэшированные ресурсы отдаются мгновенно.
  • Надежность работы оффлайн: выбор кэша как первичного источника позволяет работать без сети.
  • Обновляемость данных: сетевые стратегии гарантируют актуальность информации.

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

Оглавление