Тестирование стратегий кэширования

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

Подключение Workbox и создание Service Worker

Прежде чем тестировать стратегии, необходимо создать сервис-воркер с подключением Workbox. Пример минимальной конфигурации:

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } 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 }),
    ],
  })
);

В этом примере используется стратегия CacheFirst для изображений с ограничением количества записей и времени хранения.

Проверка работы кэша через DevTools

Инструменты браузера позволяют отслеживать состояние кэша и работу сервис-воркера:

  1. Открыть вкладку Application → Service Workers для проверки активации воркера.
  2. В разделе Cache Storage наблюдать содержимое кэшей.
  3. Использовать режимы эмуляции оффлайн (Network → Offline) для проверки доступности ресурсов при отсутствии соединения.

Основные моменты тестирования через DevTools:

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

Юнит-тестирование стратегий кэширования

Для автоматизированного тестирования Workbox можно использовать библиотеки вроде Jest и Service Worker Mocking. Пример проверки стратегии CacheFirst:

import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { setupServer } from 'msw/node';
import { rest } from 'msw';

describe('CacheFirst strategy', () => {
  it('должна сохранять ресурс в кэше после первого запроса', async () => {
    const strategy = new CacheFirst({
      cacheName: 'test-cache',
      plugins: [new CacheableResponsePlugin({ statuses: [200] })],
    });

    const response = new Response('Hello World', { status: 200 });
    global.fetch = jest.fn().mockResolvedValue(response);

    await strategy.handle({ request: new Request('/test') });
    const cache = await caches.open('test-cache');
    const cachedResponse = await cache.match('/test');

    expect(cachedResponse).not.toBeNull();
    expect(await cachedResponse.text()).toBe('Hello World');
  });
});

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

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

Для стратегий с сетевым приоритетом (NetworkFirst, StaleWhileRevalidate) важно проверить обновление ресурсов:

  1. Эмулировать изменение ресурса на сервере.
  2. Сделать повторный запрос в оффлайн-режиме и убедиться, что используется устаревший кэш.
  3. Вернуться онлайн и проверить, что ресурс обновился в кэше.

Пример с NetworkFirst:

import { NetworkFirst } from 'workbox-strategies';

const strategy = new NetworkFirst({ cacheName: 'api-cache' });

// Первый запрос (сеть доступна)
await strategy.handle({ request: new Request('/api/data') });

// Второй запрос (офлайн)
await strategy.handle({ request: new Request('/api/data') });

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

Логирование и анализ

Для детального контроля можно добавить логирование работы стратегии:

class LoggingPlugin {
  cacheDidUpdate({ request, oldResponse, newResponse, cacheName }) {
    console.log(`Кэш обновлён: ${request.url}, кэш: ${cacheName}`);
  }
}

registerRoute(
  ({ request }) => request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'scripts-cache',
    plugins: [new LoggingPlugin()],
  })
);

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

Использование автоматизированных инструментов

Для комплексного тестирования сервис-воркеров и стратегий кэширования применяются инструменты вроде Puppeteer или Playwright. Они позволяют:

  • Симулировать оффлайн-состояние.
  • Проверять последовательность сетевых запросов и использование кэша.
  • Тестировать сложные сценарии с несколькими стратегиями и кэшами.

Пример проверки с Puppeteer:

await page.setOfflineMode(true);
await page.goto('http://localhost:3000');
const content = await page.content();
expect(content).toContain('Cached Content');

Это гарантирует, что стратегиия работает корректно в реальных условиях.

Рекомендации по организации тестов

  • Разделять тесты по типам ресурсов: изображения, скрипты, API.
  • Тестировать каждый плагин отдельно (Expiration, CacheableResponse, BroadcastUpdate).
  • Проверять работу при оффлайн-режиме, медленном соединении и при обновлении ресурсов.
  • Использовать комбинацию DevTools и автоматизированных тестов для максимальной надежности.

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

Оглавление