Ограничение размера и времени жизни runtime-кэша

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

Ограничение времени жизни (maxAgeSeconds)

В runtime-кэше каждый ресурс может иметь ограничение по времени хранения через параметр maxAgeSeconds. Этот параметр задается в секундах и определяет, как долго объект считается актуальным:

runtimeCaching: [{
  urlPattern: /\/api\/.*\/*.json/,
  handler: 'cacheFirst',
  options: {
    cache: {
      name: 'api-cache',
      maxAgeSeconds: 24 * 60 * 60 // 1 день
    }
  }
}]

Особенности работы maxAgeSeconds:

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

Ограничение размера кэша (maxEntries)

Для предотвращения неограниченного роста кэша, используется параметр maxEntries, который задает максимальное количество объектов в кэше:

runtimeCaching: [{
  urlPattern: /\/images\/.*\.(png|jpg|svg)/,
  handler: 'cacheFirst',
  options: {
    cache: {
      name: 'images-cache',
      maxEntries: 50, // максимум 50 изображений
      maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
    }
  }
}]

Механизм работы maxEntries:

  • Когда количество объектов превышает лимит, старые записи удаляются по принципу LRU (Least Recently Used).
  • Это позволяет хранить только актуальные и востребованные ресурсы, предотвращая переполнение памяти браузера.
  • Параметр maxEntries удобно комбинировать с maxAgeSeconds для комплексного управления кэшем.

Комбинирование maxAgeSeconds и maxEntries

Часто на практике используется совместное ограничение по времени жизни и количеству объектов, чтобы обеспечить оптимальное управление динамическими ресурсами:

runtimeCaching: [{
  urlPattern: /\/api\/v1\/posts/,
  handler: 'networkFirst',
  options: {
    cache: {
      name: 'posts-cache',
      maxEntries: 100,
      maxAgeSeconds: 12 * 60 * 60 // 12 часов
    }
  }
}]

Пояснения к стратегии:

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

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

  1. Выделять отдельные кэши для разных типов ресурсов Разделение кэшей (например, images-cache, api-cache, fonts-cache) позволяет применять индивидуальные ограничения maxEntries и maxAgeSeconds под специфику ресурсов.

  2. Использовать LRU-подход для больших динамических данных При кэшировании больших массивов данных важно ограничивать количество записей, чтобы не перегружать браузер.

  3. Настраивать время жизни в зависимости от частоты обновления Для редко изменяемых файлов (CSS, JS) можно задавать длительный maxAgeSeconds, а для часто обновляемых API — короткий.

  4. Комбинировать стратегии кеширования Стратегии cacheFirst и networkFirst в сочетании с maxEntries и maxAgeSeconds дают гибкий контроль над динамическим контентом и обеспечивают высокую производительность приложения.

Особенности реализации

  • Sw-precache автоматически создает механизм удаления устаревших объектов при обращении к кэшу.
  • Если ресурс не был запрошен в течение срока жизни (maxAgeSeconds) и количество объектов превышает maxEntries, он удаляется при следующем обращении к кэшу.
  • Встроенная поддержка стратегий кэширования и ограничения по времени и количеству делает библиотеку удобной для Progressive Web Apps с динамическим контентом.

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

Оглавление