Условное кэширование

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

Основные концепции условного кэширования

Условное кэширование в Workbox строится на трех ключевых элементах:

  1. Route — правило маршрутизации запроса, определяющее, какие URL будут обработаны сервис-воркером.
  2. Strategy — стратегия кэширования, например, CacheFirst, NetworkFirst, StaleWhileRevalidate.
  3. Plugins — дополнительные фильтры и логика обработки запросов, которые могут включать проверку HTTP-заголовков, статуса ответа и другие условия.

Workbox позволяет комбинировать эти элементы для создания гибких сценариев кэширования.

Использование matchCallback для условного кэширования

Для настройки условного кэширования часто применяется функция matchCallback. Она принимает объект запроса и должна возвращать true, если запрос необходимо кэшировать, и false, если кэширование не требуется.

Пример настройки:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/images/') && url.searchParams.get('cache') === 'true',
  new CacheFirst({
    cacheName: 'images-cache',
    plugins: [
      // Можно добавить плагины, например, для очистки старых версий кэша
    ],
  })
);

В этом примере кэшируются только изображения из папки /images/, у которых в параметрах запроса cache=true.

Фильтрация по HTTP-статусам и типам контента

Workbox предоставляет плагины, позволяющие дополнительно проверять ответы перед кэшированием. Например, плагин CacheableResponsePlugin позволяет кэшировать только успешные ответы (HTTP 200) или определенные типы контента.

import { CacheableResponsePlugin } from 'workbox-cacheable-response';

new CacheFirst({
  cacheName: 'api-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [200],
      headers: {
        'Content-Type': 'application/json'
      },
    }),
  ],
});

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

Условное кэширование с динамическими параметрами

Иногда необходимо кэшировать ресурсы в зависимости от динамических данных, например, авторизации пользователя или геолокации. Для этого matchCallback может проверять содержимое заголовков или токенов.

registerRoute(
  ({ request, url }) => {
    const authToken = request.headers.get('Authorization');
    return url.pathname.startsWith('/user-data/') && authToken !== null;
  },
  new CacheFirst({ cacheName: 'user-cache' })
);

Этот подход гарантирует, что кэшируются только авторизованные запросы.

Сочетание условного кэширования с разными стратегиями

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

import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.endsWith('.json'),
  new NetworkFirst({ cacheName: 'json-cache' })
);

registerRoute(
  ({ url }) => url.pathname.endsWith('.css'),
  new StaleWhileRevalidate({ cacheName: 'css-cache' })
);

Здесь JSON-файлы будут сначала запрашиваться из сети, а CSS-файлы будут кэшироваться и обновляться в фоне.

Контроль за временем жизни кэша

Для условного кэширования важно управлять сроком хранения данных. Плагин ExpirationPlugin позволяет задавать лимиты по количеству объектов и времени хранения:

import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: 'dynamic-cache',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50,
      maxAgeSeconds: 7 * 24 * 60 * 60, // 7 дней
    }),
  ],
});

Это предотвращает переполнение кэша и позволяет автоматически удалять устаревшие ресурсы.

Логирование и отладка условного кэширования

Для проверки корректности работы условных правил можно использовать workbox-core и его методы логирования. Например:

import { setConfig, logger } from 'workbox-core';

setConfig({ debug: true });
logger.log('Настройка условного кэширования активирована');

Отладка с включенным режимом debug позволяет отслеживать, какие запросы попадают в кэш и какие правила срабатывают.

Заключение по практическим подходам

Условное кэширование с Workbox предоставляет возможность:

  • Разграничивать кэшируемые ресурсы по URL, параметрам и заголовкам.
  • Применять разные стратегии кэширования для различных типов контента.
  • Управлять временем хранения и количеством объектов в кэше.
  • Исключать из кэша ошибки сервера и неподходящий контент.

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

Оглавление