Обновление precache при новом деплое

Precache — это механизм Workbox, который позволяет заранее кэшировать критически важные ресурсы приложения во время установки service worker. Основная цель — обеспечить мгновенную доступность этих ресурсов при последующих запросах, даже при отсутствии соединения с сетью.

При каждом новом деплое приложение может получать обновления, поэтому ключевым аспектом становится обновление precache. Workbox использует revisioning для управления версиями файлов: каждый ресурс получает уникальный хэш (revision), формируемый на основе содержимого файла. Если содержимое изменилось, хэш меняется, что сигнализирует service worker о необходимости обновить кэш.

Структура precache manifest

Precache manifest — это массив объектов, каждый из которых описывает ресурс для кэширования:

[
  { url: '/index.html', revision: 'a1b2c3d4' },
  { url: '/styles/main.css', revision: 'f5e6g7h8' },
  { url: '/scripts/app.js', revision: 'i9j0k1l2' }
]

Поля объекта:

  • url — путь к ресурсу относительно корня приложения.
  • revision — уникальный идентификатор версии файла. Если он отсутствует, Workbox использует стратегию cache-first, что потенциально может привести к устаревшим ресурсам.

Автоматическое обновление precache

Workbox позволяет автоматически генерировать precache manifest при сборке проекта с помощью workbox-build или workbox-webpack-plugin. При каждом новом билде:

  1. Проходит сканирование указанных директорий.

  2. Вычисляются хэши файлов.

  3. Формируется новый manifest.

  4. При установке нового service worker происходит сравнение старого и нового manifest.

    • Файлы с изменившимся revision обновляются.
    • Неизменные ресурсы остаются в кэше.

Пример конфигурации в workbox-webpack-plugin:

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new InjectManifest({
      swSrc: './src/sw.js',
      swDest: 'service-worker.js',
      include: [/\.html$/, /\.js$/, /\.css$/],
    }),
  ],
};

Логика обновления ресурсов

Workbox обеспечивает плавное обновление кэша через жизненный цикл service worker:

  1. Install event — добавление всех ресурсов из precache manifest.
  2. Activate event — удаление старых кэшей, не соответствующих текущему manifest.
  3. Fetch event — обработка запросов, отдача ресурсов из кэша или сети в зависимости от стратегии.

Ключевой момент — при новом деплое изменённые ресурсы получают новый revision, и при следующей установке service worker они автоматически скачиваются и заменяют старые версии.

Стратегии контроля версий

  • revisioning через хэш содержимого — оптимальный способ контроля, гарантирующий, что обновления произойдут только при изменении файла.
  • revision: null — рекомендуется только для неизменяемых ресурсов, иначе возможны проблемы с устаревшим кэшем.
  • manual versioning — иногда используется, когда требуется точный контроль над обновлением, но увеличивает риск ошибок.

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

  1. Не кэшировать динамический контент через precache — для этого лучше использовать runtime caching.
  2. Обновление service worker — при каждом деплое браузер автоматически скачает новый service worker, который активируется после закрытия всех вкладок с текущей версией.
  3. Логирование и дебаг — Workbox предоставляет методы workbox.precaching.getCacheKeyForURL(url) и workbox.precaching.precacheAndRoute(manifest) для отладки состояния кэша.

Пример интеграции в sw.js

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

// Опционально, добавление runtime caching для API
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst()
);

Этот код обеспечивает:

  • Автоматическое кэширование статических ресурсов из manifest.
  • Поддержку обновления кэша при изменении revision.
  • Возможность расширять функциональность через runtime caching.

Особенности обновления при новом деплое

  • Непрерывная доступность приложения: пользователи продолжают использовать старые версии файлов до активации нового service worker.
  • Атомарность обновлений: новые версии ресурсов устанавливаются одновременно, что предотвращает частичное обновление и ошибки.
  • Минимизация сетевого трафика: перекачиваются только изменённые файлы.

Workbox делает процесс управления precache прозрачным и автоматизированным, обеспечивая безопасное и эффективное обновление фронтенд-ресурсов при каждом новом деплое.

Оглавление