Инспектирование сетевых запросов в офлайн-режиме

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

Service Worker, созданный Sw-precache, регистрирует обработчики событий fetch, которые выполняют стратегию Cache-First или Network-First, в зависимости от конфигурации. Это ключевой механизм для инспектирования запросов и анализа их результатов в офлайн-режиме.

Настройка Sw-precache для инспектирования

В конфигурационном файле sw-precache-config.js можно определить несколько важных параметров:

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

Пример настройки runtimeCaching для анализа сетевых запросов:

module.exports = {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/**/*.css',
    'dist/**/*.js',
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst',
    options: {
      cache: {
        name: 'api-cache',
        maxEntries: 50,
        maxAgeSeconds: 300,
      },
      fetchOptions: {
        mode: 'cors',
        credentials: 'same-origin',
      },
    },
  }],
};

Здесь каждый запрос к /api/* сначала пробует загрузку через сеть, а при её недоступности используется кэш.

Инспекция запросов через DevTools

При работе офлайн полезно использовать инструменты разработчика в браузере:

  1. Сеть (Network): при отключении интернета в Chrome или Firefox можно видеть, какие запросы обслуживаются Service Worker. Отмечаются статусами 200 (from ServiceWorker) или 304 (from cache).
  2. Application → Service Workers: показывает зарегистрированные воркеры, их активные версии и кэшированные ресурсы.
  3. Console: можно включить логирование через Sw-precache, используя параметр verbose: true. Это выводит подробные сообщения о каждом кэшировании и обработке запросов.
var swPrecache = require('sw-precache');

swPrecache.write('service-worker.js', {
  staticFileGlobs: ['dist/**/*.*'],
  stripPrefix: 'dist/',
  verbose: true
});

Стратегии обработки запросов

Sw-precache поддерживает несколько подходов к работе с запросами:

  • Cache-First — сначала проверяется кэш, если ресурс найден, он возвращается немедленно. При этом офлайн-доступ гарантирован.
  • Network-First — сначала выполняется сетевой запрос, а при его неудаче используется кэш. Полезно для динамических данных, которые обновляются часто.
  • Fastest — одновременный запуск сети и кэша, возвращается тот ответ, который пришёл первым.
  • Cache-Only — используется исключительно кэш, подход для полностью статических ресурсов.
  • Network-Only — обращение всегда к сети, кэш не используется.

Выбор стратегии зависит от того, какие ресурсы нужно инспектировать и как важна актуальность данных при офлайн-режиме.

Логирование и диагностика офлайн-запросов

Для детальной проверки можно внедрить пользовательские обработчики событий fetch:

self.addEventListener('fetch', function(event) {
  console.log('Перехваченный запрос:', event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Ответ из кэша:', event.request.url);
        return response;
      }
      return fetch(event.request).then(function(networkResponse) {
        console.log('Ответ с сети:', event.request.url);
        return networkResponse;
      });
    })
  );
});

Такой подход позволяет:

  • Отслеживать, какие ресурсы реально берутся из кэша при офлайн-режиме.
  • Анализировать частоту обращений к сети и кэшу.
  • Выявлять проблемные запросы, которые не попадают в кэш или не обслуживаются воркером.

Работа с динамическим кэшем

Sw-precache позволяет создавать runtime cache, что особенно важно для API-запросов:

  • maxEntries — максимальное количество объектов в кэше.
  • maxAgeSeconds — время жизни кэшированных данных.
  • cacheName — уникальное имя кэша для разных типов ресурсов.

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

Практические рекомендации

  • Использовать verbose-логирование для отслеживания всех действий Service Worker.
  • Настраивать runtimeCaching отдельно для статических и динамических ресурсов.
  • Регулярно очищать кэш через DevTools или программно, чтобы исключить устаревшие ответы.
  • Проверять работу Service Worker в разных сценариях: онлайн, офлайн, медленное соединение.
  • Для сложных приложений сочетать несколько стратегий (networkFirst для API, cacheFirst для статических файлов).

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

Оглавление