Обработчик cacheOnly

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

Настройка cacheOnly

Для использования стратегии cacheOnly необходимо определить объект конфигурации при генерации сервис-воркера. Ключевыми параметрами являются:

  • urlPattern — регулярное выражение или функция для определения, какие URL попадут под обработку стратегии.
  • handler — имя стратегии. В данном случае оно всегда равно 'cacheOnly'.
  • options — дополнительные настройки кэширования, такие как имя кэша или версии.

Пример конфигурации в sw-precache:

module.exports = {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/**/*.css',
    'dist/**/*.js',
    'dist/images/**/*.{png,jpg,gif,svg}'
  ],
  runtimeCaching: [
    {
      urlPattern: /\/images\//,
      handler: 'cacheOnly',
      options: {
        cacheName: 'images-cache',
        cacheExpiration: {
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60 // 30 дней
        }
      }
    }
  ]
};

В этом примере все изображения, загруженные с URL, содержащих /images/, будут обслуживаться исключительно из кэша images-cache. Если изображения не найдены, запрос вернет ошибку 404.

Принцип работы

Обработчик cacheOnly выполняет последовательность действий:

  1. При перехвате запроса сервис-воркер проверяет кэш по указанному имени.
  2. Если ресурс присутствует, он возвращается напрямую из кэша.
  3. Если ресурса нет, запрос не идет в сеть, а завершается ошибкой.

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

Преимущества стратегии

  • Скорость: ресурсы доставляются мгновенно, без сетевых задержек.
  • Экономия трафика: сеть не используется, что актуально для мобильных приложений.
  • Простота: отсутствует логика обновления ресурсов на лету.

Недостатки и ограничения

  • Если ресурс отсутствует в кэше, пользователь получает ошибку.
  • Не подходит для динамического контента или ресурсов, которые часто обновляются.
  • Требует тщательного планирования предзагрузки ресурсов в кэш.

Интеграция с другими стратегиями

Стратегию cacheOnly часто комбинируют с другими стратегиями, чтобы обеспечить гибкость:

  • networkFirst для данных API, которые должны быть актуальными.
  • cacheFirst для редко обновляемых ресурсов, но с возможностью обновления через сеть.
  • fastest для ситуаций, где важна минимальная задержка, но допустимо обновление данных из сети.

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

runtimeCaching: [
  {
    urlPattern: /\/images\//,
    handler: 'cacheOnly',
    options: { cacheName: 'images-cache' }
  },
  {
    urlPattern: /\/api\//,
    handler: 'networkFirst',
    options: { cacheName: 'api-cache' }
  }
]

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

  • Предзагрузка критических ресурсов: использовать staticFileGlobs или importScripts для добавления файлов в кэш при установке сервис-воркера.
  • Версионирование кэша: изменять имя кэша при обновлении ресурсов, чтобы избежать конфликтов и устаревших данных.
  • Мониторинг ошибок: логировать случаи, когда ресурс не найден в кэше, для последующего анализа.

Пример установки сервис-воркера с cacheOnly

importScripts('sw-precache.js');

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('images-cache').then(cache => {
      return cache.addAll([
        '/images/logo.png',
        '/images/banner.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || Promise.reject('Resource not in cache');
    })
  );
});

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

Эта стратегия обеспечивает максимальную скорость и предсказуемость для статических ресурсов, делая cacheOnly важным инструментом в арсенале разработчика при построении оффлайн-ориентированных приложений на sw-precache.

Оглавление