Тестирование поведения кэша в браузере

Библиотека Sw-precache предназначена для генерации сервис-воркеров, которые автоматически кэшируют ресурсы веб-приложения. Основная идея заключается в том, что при установке сервис-воркера создается предопределённый кэш, включающий указанные статические файлы. Это позволяет обеспечить быстрый доступ к ним даже при отсутствии соединения с сетью.

Ключевые моменты работы с кэшем:

  • Статический кэш – содержит заранее указанные файлы (HTML, CSS, JS, изображения).
  • Динамический кэш – формируется в процессе работы приложения, когда сервис-воркер перехватывает сетевые запросы.
  • Версионирование кэша – Sw-precache генерирует уникальные имена кэшей на основе контрольной суммы файлов, что предотвращает конфликт старых и новых ресурсов.

Генерация и регистрация сервис-воркера

Процесс начинается с конфигурации Sw-precache через sw-precache или sw-precache-webpack-plugin. Основные параметры:

  • staticFileGlobs – массив путей к статическим файлам для кэширования.
  • stripPrefix – префикс пути, который нужно удалить при добавлении файлов в кэш.
  • runtimeCaching – объект правил для динамического кэширования запросов.
  • handleFetch – включает перехват запросов сервис-воркером.

Пример конфигурации:

const swPrecache = require('sw-precache');

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'public/**/*.html',
    'public/css/**/*.css',
    'public/js/**/*.js',
    'public/images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: 'public/',
  runtimeCaching: [{
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst'
  }],
  handleFetch: true
});

После генерации файл service-worker.js регистрируется в основном скрипте приложения:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => console.log('Service Worker зарегистрирован'))
    .catch(err => console.error('Ошибка регистрации:', err));
}

Методы тестирования кэша в браузере

Для проверки работы сервис-воркера и кэша существуют встроенные инструменты в браузерах, в первую очередь в Chrome DevTools:

  • Application → Service Workers – отображает статус сервис-воркера, его версии и зарегистрированные события (install, activate, fetch).
  • Application → Cache Storage – показывает содержимое кэшей, включая имена, размер и список файлов.
  • Network Panel → Offline Mode – позволяет имитировать отсутствие соединения, чтобы убедиться, что кэшированные ресурсы загружаются корректно.

Рекомендуемая последовательность тестирования:

  1. Убедиться, что сервис-воркер зарегистрирован и активен.
  2. Проверить наличие статических файлов в кэше после события install.
  3. Изменить один из файлов и обновить сервис-воркер, чтобы проверить версионирование кэша.
  4. Переключить браузер в оффлайн-режим и убедиться, что приложение полностью работает без сети.
  5. Проверить обработку динамических запросов, если настроено runtimeCaching.

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

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

Методы проверки:

  • Обновление файлов: изменить содержимое файла и пересобрать сервис-воркер, затем выполнить navigator.serviceWorker.ready и проверить, что новый кэш появился.
  • Удаление старого кэша: открыть DevTools → Application → Cache Storage и убедиться, что кэш старой версии отсутствует.
  • Проверка события activate: добавить в service-worker.js логирование события activate, чтобы убедиться, что очистка старого кэша выполнена.

Пример логирования активации:

self.addEventListener('activate', event => {
  console.log('Service Worker активирован. Очистка старых кэшей...');
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== 'my-app-cache-v2') {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Отладка проблем с кэшем

Частые проблемы и способы их диагностики:

  • Файл не появляется в кэше – проверить шаблоны в staticFileGlobs и stripPrefix.
  • Старый контент загружается – убедиться, что при обновлении сервис-воркера изменилось имя кэша.
  • Fetch не обрабатывается – проверить флаг handleFetch: true и настройки runtimeCaching.
  • Проблемы с оффлайн-режимом – включить Offline в DevTools и убедиться, что все критические файлы доступны из кэша.

Логирование событий сервис-воркера (install, activate, fetch) является основным инструментом для глубокого анализа и тестирования.

Автоматизированное тестирование кэша

Для крупных проектов рекомендуется использовать автоматизированные тесты, которые проверяют:

  • Наличие всех файлов в кэше после установки сервис-воркера.
  • Корректное обновление кэша при изменении файлов.
  • Работа приложения в оффлайн-режиме.
  • Поведение динамических запросов с разными стратегиями кэширования (networkFirst, cacheFirst).

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

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

Оглавление