Что и когда кэшировать для надёжного офлайна

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

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

Какие ресурсы кэшировать

  1. Статические файлы приложения

    • HTML-шаблоны, CSS, JavaScript.
    • Изображения, шрифты и иконки.
    • Файлы, которые не зависят от пользовательских данных.

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

  2. Библиотеки и сторонние зависимости

    • JS-библиотеки (например, jQuery, React, Lodash).
    • CSS-фреймворки (Bootstrap, Materialize).

    Статические версии сторонних библиотек лучше хранить в кэше, так как их обновления происходят редко и это ускоряет работу приложения.

  3. Маршруты для офлайн-доступа

    • Страницы с фиксированным содержимым, например /about, /help.
    • Файлы конфигурации, JSON с неизменяемыми данными.

    Использование стратегии cacheFirst для таких маршрутов позволяет обслуживать пользователя без задержки.

Какие ресурсы не стоит кэшировать

  • Динамические API-запросы, зависящие от состояния пользователя (/api/user-data, /api/orders).
  • Часто обновляемые данные (новости, курсы валют).
  • Ресурсы с коротким сроком жизни или сессией (auth tokens, временные изображения).

Для этих данных следует применять стратегию Network First, чтобы всегда получать актуальную версию.

Стратегии кэширования в Sw-precache

  1. Cache First (сначала кэш)

    • Приоритет отдаётся локальному кэшу.
    • Применяется к статическим ресурсам.
    • Позволяет работать полностью офлайн.

  2. Network First (сначала сеть)

    • Запрос идёт на сервер, если он недоступен — используется кэш.
    • Подходит для динамических данных.
    • Обеспечивает актуальность информации, минимизируя устаревание.

  3. Stale While Revalidate (устарело — обновить)

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

Настройка Sw-precache для надёжного офлайна

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

const swPrecache = require('sw-precache');

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/css/**/*.css',
    'dist/js/**/*.js',
    'dist/images/**/*.{png,jpg,svg}',
    'dist/fonts/**/*.{woff,woff2}'
  ],
  stripPrefix: 'dist/',
  navigateFallback: '/index.html',
  runtimeCaching: [
    {
      urlPattern: /\/api\//,
      handler: 'networkFirst'
    },
    {
      urlPattern: /\/images\//,
      handler: 'cacheFirst'
    }
  ],
  verbose: true
});
  • staticFileGlobs — список файлов для кэширования при установке сервис-воркера.
  • stripPrefix — удаляет лишний путь, чтобы файлы кэшировались корректно.
  • navigateFallback — fallback для маршрутов SPA.
  • runtimeCaching — стратегии для динамических ресурсов.

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

Каждое обновление приложения должно сопровождаться изменением версии кэша. Sw-precache добавляет hash к файлам, что позволяет:

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

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

  • Кэшировать только стабильные, редко изменяющиеся ресурсы.
  • Использовать networkFirst для данных, которые должны быть свежими.
  • Настроить fallback для SPA, чтобы офлайн-режим работал корректно.
  • Проверять размер кэша и удалять устаревшие файлы, чтобы не расходовать память устройства.
  • Вести логирование операций кэша через параметр verbose, чтобы отслеживать ошибки и поведение сервис-воркера.

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

Оглавление