Тестирование офлайн-режима

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

Использование DevTools для эмуляции офлайн-режима

Браузеры, такие как Chrome и Edge, имеют встроенные средства для эмуляции отсутствия сети:

  1. Открытие панели DevTools: F12 или Ctrl+Shift+I.
  2. Переход в раздел Network.
  3. Выбор режима Offline: в выпадающем списке Throttling выбрать “Offline”.
  4. Поведение страниц: при отключении сети важно наблюдать, какие ресурсы загружаются из кэша, а какие вызывают ошибки. Это позволяет проверить корректность настроенных стратегий Workbox.

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

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

  • CacheFirst: сначала проверяется кэш, если ресурс найден — используется он, иначе выполняется сетевой запрос. Идеально подходит для статических ресурсов, таких как изображения и стили.
  • NetworkFirst: сначала делается сетевой запрос, если он неудачен — берется кэш. Эффективно для API-запросов, где важна актуальность данных.
  • StaleWhileRevalidate: отдаёт кэшированный ресурс сразу, параллельно обновляя его из сети. Балансирует между скоростью и актуальностью.

Тестирование должно включать сценарии:

  1. Полностью офлайн: проверка корректного отображения страниц и ресурсов, доступных только из кэша.
  2. Частичная сеть: имитация медленного соединения или отказа отдельных запросов для проверки fallback-логики.
  3. Первичная загрузка: проверка работы стратегии при отсутствии кэшированных данных.

Логирование и отладка Workbox

Для детального анализа работы сервис-воркеров и кэша включается логирование:

import { setLogLevel } from 'workbox-core';

setLogLevel('debug');

Это позволяет отслеживать:

  • Регистрацию сервис-воркера.
  • Успешное кэширование ресурсов.
  • Обновление кэша при изменении версий файлов.
  • Обработку стратегий кэширования при запросах.

Автоматизированное тестирование офлайн-режима

Помимо ручной проверки через DevTools, возможно использовать инструменты для автоматизированного тестирования:

  • Lighthouse: встроенный в Chrome инструмент, который позволяет оценить поддержку офлайн-режима и PWA.
  • Cypress + Service Worker: можно эмулировать сетевые сбои и проверять, что приложение корректно реагирует на офлайн-состояние.
  • Jest + Workbox-mock: библиотека workbox-recipes и workbox-core могут быть замоканы для проверки логики кэширования без реальной сети.

Пример использования workbox-strategies в тесте:

import { CacheFirst } from 'workbox-strategies';
import { setupWorker } from 'msw';

const cacheStrategy = new CacheFirst();
const worker = setupWorker();

test('отдача кэшированного ресурса при офлайн', async () => {
  worker.use(
    rest.get('/api/data', (req, res, ctx) => res.networkError('Failed'))
  );

  const response = await cacheStrategy.handle({ request: new Request('/api/data') });
  expect(response).not.toBeNull();
});

Проверка fallback-ресурсов

Важный аспект офлайн-тестирования — корректная работа fallback-страниц и fallback-контента. Workbox позволяет использовать registerRoute с обработчиком, возвращающим статический файл в случае ошибки сети:

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'document',
  async ({ event }) => {
    try {
      return await fetch(event.request);
    } catch (error) {
      return caches.match('/offline.html');
    }
  }
);

Тестирование включает сценарии:

  • Полная потеря сети на разных страницах.
  • Проверка, что fallback-страница загружается корректно.
  • Проверка кэширования fallback-ресурса при первой загрузке.

Инструменты мониторинга и профилирования

Для долгосрочного контроля офлайн-режима полезны:

  • Application tab в DevTools: проверка содержимого кэшей и состояния сервис-воркера.
  • Performance tab: оценка времени загрузки ресурсов из кэша.
  • Workbox Precaching Manifest: анализ файлов, которые будут предзагружены при установке сервис-воркера.

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

Оглавление