Отладка сервис-воркера в DevTools

Работа с сервис-воркерами начинается с их регистрации через navigator.serviceWorker.register(). В DevTools Chrome можно отследить регистрацию на вкладке Application → Service Workers. Здесь отображаются все активные сервис-воркеры, их статус (активен, ожидает активации, установочный) и информация о сроке действия.

Основные моменты:

  • Флаг “Update on reload” позволяет принудительно обновлять сервис-воркер при каждом обновлении страницы.
  • Поле Source открывает исходный файл сервис-воркера напрямую для отладки.
  • Статус Redundant сигнализирует о том, что сервис-воркер больше не используется и готов к удалению.

Регистрация сервис-воркера через Workbox часто выполняется с помощью функции workbox.precaching.precacheAndRoute(). Для отладки важно убедиться, что пути к ресурсам указаны корректно и файлы доступны по сети.

Инструменты для отладки кэша

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

  • Cache Storage: DevTools отображает все кэши, созданные сервис-воркером. Для Workbox это обычно кэш префетченных ресурсов (precache-v1) и динамических кэшей (runtime-cache).
  • Просмотр содержимого кэша позволяет проверить, какие версии файлов сохранены и как они сопоставляются с версиями на сервере.
  • Очистка кэша через DevTools помогает тестировать обновления сервис-воркера без необходимости менять версии ресурсов вручную.

Важно следить за стратегиями кэширования: CacheFirst, NetworkFirst, StaleWhileRevalidate. Для каждой стратегии необходимо убедиться, что DevTools корректно отражает порядок загрузки ресурсов и их источник (кэш или сеть).

Просмотр логов и событий сервис-воркера

DevTools предоставляет вкладку Console, где отображаются сообщения, выводимые через console.log внутри сервис-воркера.

  • Для Workbox удобно включать логирование всех событий кэширования с помощью workbox.setConfig({ debug: true }).
  • Можно отслеживать события жизненного цикла: install, activate, fetch, message.
  • Для отладки событий fetch полезно выводить информацию о запрашиваемом URL, источнике ответа (кэш/сеть) и статусе запроса.

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

Инструменты Network для проверки загрузки ресурсов

Вкладка Network помогает определить, какие ресурсы загружаются с сервера, а какие из кэша сервис-воркера:

  • При активации Workbox в колонке Size/Transferred ресурсы, полученные из кэша, обычно помечаются как (from ServiceWorker).
  • Фильтр по ServiceWorker позволяет быстро увидеть все запросы, которые обработал сервис-воркер.
  • Инструмент Offline Mode симулирует отсутствие сети, что помогает проверить работу стратегий кэширования и корректность fallback-ресурсов.

Использование Workbox DevTools и Workbox Logging

Workbox предоставляет расширения для расширенной отладки:

  • workbox-core позволяет включать подробные логи через workbox.core.setLogLevel().
  • workbox-precaching ведет журнал кэширования префетченных файлов, включая их версии и статусы.
  • workbox-routing помогает отслеживать маршруты и их обработку через события fetch.

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

Управление версиями и обновления сервис-воркера

Workbox автоматически добавляет хэш к префетч-ресурсам для контроля версий. Отладка обновлений требует проверки следующих моментов:

  • New Service Worker Waiting: новый воркер установлен, но ожидает активации.
  • SkipWaiting(): метод принудительной активации нового воркера.
  • Clients.claim(): позволяет новому сервис-воркеру сразу контролировать все открытые страницы.

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

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

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

  • Не зарегистрирован сервис-воркер: проверка консоли на ошибки Failed to register service worker.
  • Файлы не попадают в кэш: проверка правильности precacheAndRoute() и соответствие путей файлов.
  • Старые версии остаются в кэше: ручная очистка кэшей через DevTools и проверка версий ресурсов.
  • Fetch не срабатывает по стратегии: проверка фильтров маршрутизации в registerRoute() и порядок обработки событий.

Практическая последовательность отладки

  1. Проверка регистрации сервис-воркера на вкладке Application → Service Workers.
  2. Включение логирования Workbox через setConfig({ debug: true }).
  3. Мониторинг кэшей в Cache Storage.
  4. Проверка загрузки ресурсов через Network, включая симуляцию оффлайн.
  5. Отслеживание событий fetch и проверка работы стратегий кэширования.
  6. Управление версиями сервис-воркера и активация новых воркеров через DevTools.
  7. Диагностика ошибок и корректировка конфигурации Workbox.

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

Оглавление