Принцип работы офлайн-кэша

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

Генерация сервис-воркера

При интеграции sw-precache создается файл сервис-воркера, содержащий:

  1. Список файлов для кеширования (precache manifest) Это массив объектов с URL ресурсов и хешами версий файлов. Каждый объект имеет структуру:

    {
  "url": "/static/js/app.js",
  "revision": "a1b2c3d4e5"
}

    revision используется для контроля актуальности кеша: при изменении файла библиотека автоматически обновляет соответствующую запись.

  2. Методы установки и активации Сервис-воркер проходит через события install и activate. На этапе установки происходит добавление файлов в кеш:

    self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache-v1').then(cache => cache.addAll([
      '/index.html',
      '/static/css/style.css',
      '/static/js/app.js'
    ]))
  );
});

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

Стратегии кеширования

sw-precache использует статическую стратегию precaching, при которой ресурсы всегда загружаются из кеша, если они присутствуют. Дополнительно возможны следующие подходы:

  • Network First для динамических данных: сначала делается запрос к сети, и только при отсутствии ответа используется кеш.
  • Cache First для статических файлов: ресурсы берутся из кеша, что минимизирует время загрузки и снижает сетевую нагрузку.
  • Stale-while-revalidate: отдаёт кешированные данные сразу, но параллельно обновляет их из сети для следующей загрузки.

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

Каждое обновление статического файла сопровождается изменением revision. Сервис-воркер проверяет precache manifest и:

  • Удаляет устаревшие файлы из кеша.
  • Добавляет новые или обновлённые ресурсы.
  • Обеспечивает консистентность данных при обновлениях приложения.
caches.keys().then(cacheNames => {
  return Promise.all(
    cacheNames.map(cacheName => {
      if (cacheName !== 'my-cache-v2') {
        return caches.delete(cacheName);
      }
    })
  );
});

Обработка запросов пользователя

Сервис-воркер перехватывает все сетевые запросы через событие fetch:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Если ресурс есть в кеши, он возвращается мгновенно. Если нет — выполняется сетевой запрос. Это обеспечивает гибридный офлайн/онлайн режим, где приложение остается функциональным даже без подключения к сети.

Интеграция с инструментами сборки

sw-precache легко интегрируется с Webpack, Gulp, Grunt, позволяя:

  • Автоматически сканировать каталоги проекта.
  • Формировать актуальный precache manifest.
  • Встраивать сервис-воркер в финальный билд.

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

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

gulp.task('generate-service-worker', () => {
  return swPrecache.write('service-worker.js', {
    staticFileGlobs: [
      'dist/**/*.html',
      'dist/**/*.js',
      'dist/**/*.css'
    ],
    stripPrefix: 'dist/',
    navigateFallback: '/index.html'
  });
});

Управление навигацией и fallback

Для SPA часто используется navigateFallback, который позволяет направлять все неизвестные URL на главный HTML-файл:

navigateFallback: '/index.html'

Это гарантирует корректную работу офлайн-навигации и предотвращает ошибки 404 при прямом вводе адресов страниц.

Безопасность и производительность

  • Сервис-воркеры работают только через HTTPS.
  • Кешированные ресурсы должны иметь корректные заголовки, чтобы избегать устаревших версий.
  • Не рекомендуется кешировать чувствительные данные, так как сервис-воркер управляет клиентским хранилищем, доступным в браузере.

Итоговая архитектура офлайн-кэша

  1. Precache manifest → определяет ресурсы для предварительного кеширования.
  2. Событие install → добавляет файлы в кеш.
  3. Событие activate → удаляет устаревшие кеши.
  4. Событие fetch → обслуживает запросы через кеш, поддерживая офлайн-доступ.
  5. Версионирование и обновление → контролирует актуальность файлов.

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

Оглавление