Инспектирование кэша через DevTools

Workbox предоставляет мощный набор инструментов для реализации стратегий кэширования и управления ресурсами в Progressive Web App (PWA). Одним из ключевых аспектов отладки является инспектирование кэша, чтобы убедиться, что нужные ресурсы действительно сохраняются, обновляются и извлекаются корректно.

Панель Application

В Chrome DevTools инспектирование кэша Workbox осуществляется через вкладку Application. Основные элементы, на которые стоит обратить внимание:

  • Cache Storage Здесь отображаются все кэши, созданные приложением, включая кэши, управляемые Workbox. Каждый кэш имеет своё имя, которое соответствует конфигурации cacheName в стратегии Workbox. Например:

    const cacheName = 'my-app-cache-v1';

    В DevTools этот кэш будет виден в списке Cache Storage.

  • Service Workers Вкладка Service Workers позволяет наблюдать за статусом активного service worker, его обновлениями и событиями активации. Важно убедиться, что service worker находится в состоянии activated, иначе кэширование не будет работать.

Просмотр содержимого кэша

Для анализа ресурсов, сохранённых Workbox:

  1. Открыть вкладку Application → Cache Storage.
  2. Выбрать нужный кэш.
  3. Развернуть его содержимое, чтобы увидеть список URL, сохранённых в кэше.
  4. Можно проверить заголовки, типы контента и размеры ресурсов.

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

Инструменты анализа

  • Network → Disable cache Для корректного тестирования стратегий кэширования важно отключить стандартное кэширование браузера. Это помогает изолировать поведение Workbox.

  • Service Worker Logging Включение подробного логирования в Workbox (debug: true) позволяет видеть в консоли информацию о том, какие ресурсы были закэшированы, обновлены или удалены. Пример конфигурации:

    workbox.setConfig({ debug: true });

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

Управление версиями кэша

Workbox автоматически обрабатывает версии кэша через механизмы cacheName и precacheManifest. В DevTools это проявляется в виде нескольких кэшей с разными суффиксами версий. При обновлении сервисного работника старые кэши можно удалить вручную или настроить автоматическое удаление:

workbox.precaching.cleanupOutdatedCaches();

DevTools позволяет проверить, какие кэши остаются актуальными, а какие устарели.

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

Для каждого маршрута или ресурса можно определить стратегию. В DevTools удобно проверять, как конкретный URL обрабатывается:

  • Stale-While-Revalidate — сначала возвращается кэш, потом обновляется.
  • Cache-First — всегда берётся из кэша, если ресурс там есть.
  • Network-First — сначала запрос к сети, если неудачно — кэш.

Вкладка Network в DevTools показывает, был ли ресурс загружен из кэша (статус 200 (from ServiceWorker)), что позволяет визуально проверять корректность стратегии.

Инспектирование precache ресурсов

Workbox precaching сохраняет критические ресурсы при установке service worker. В DevTools:

  1. Открыть Application → Cache Storage.
  2. Найти кэш с префиксом workbox-precache.
  3. Проверить, что все ресурсы из precache manifest присутствуют.
  4. Использовать логирование для отладки, если какой-либо ресурс не был закэширован.

Практические советы

  • Следить за совпадением версий service worker и кэшей.
  • Регулярно очищать устаревшие кэши через cleanupOutdatedCaches.
  • Проверять корректность стратегии для динамических данных.
  • Использовать DevTools для анализа времени загрузки ресурсов и их источника (сеть или кэш).

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

Оглавление