Манифест предварительного кэширования

Workbox предоставляет мощные инструменты для управления кэшированием ресурсов в прогрессивных веб-приложениях (PWA). Одним из ключевых компонентов является механизм предварительного кэширования (precache), который позволяет заранее определить набор ресурсов для хранения в сервис-воркере, обеспечивая их мгновенную доступность при последующих посещениях приложения. Центральным элементом этого механизма является манифест предварительного кэширования.

Структура манифеста

Манифест предварительного кэширования — это массив объектов, каждый из которых описывает ресурс, который необходимо кэшировать. Стандартная структура выглядит следующим образом:

[
  {
    "url": "/index.html",
    "revision": "f7b5a1c2d3e4"
  },
  {
    "url": "/styles/main.css",
    "revision": "a1b2c3d4e5"
  },
  {
    "url": "/scripts/app.js",
    "revision": "1234567890"
  }
]

Ключевые поля:

  • url — путь к ресурсу, который должен быть закэширован.
  • revision — контрольная сумма или хэш файла. Обеспечивает версионирование ресурса: при изменении контента автоматически обновляется кэш.

Генерация манифеста

Для создания манифеста можно использовать автоматические инструменты Workbox, например:

  • workbox-cli с командой workbox generateSW или workbox injectManifest.
  • Плагин workbox-webpack-plugin для интеграции с Webpack.

Пример использования injectManifest в конфигурации Webpack:

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new InjectManifest({
      swSrc: './src/service-worker.js',
      swDest: 'service-worker.js',
      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024
    })
  ]
};

В этом случае Workbox сканирует указанные ресурсы, генерирует манифест и внедряет его в сервис-воркер.

Интеграция манифеста в сервис-воркер

После генерации манифест импортируется в сервис-воркер с помощью функции precacheAndRoute:

import { precacheAndRoute } from 'workbox-precaching';
import manifest from './precache-manifest.js';

precacheAndRoute(manifest);

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

  • precacheAndRoute регистрирует все ресурсы из манифеста в кэше при установке сервис-воркера.
  • При запросе ресурса из этого списка Workbox возвращает его из кэша без обращения к сети, если версия совпадает.
  • При изменении revision ресурса происходит автоматическое обновление кэша.

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

Workbox обеспечивает гибкие возможности для управления жизненным циклом закэшированных ресурсов:

  1. Revision-based cache Ресурс обновляется только при изменении поля revision. Это минимизирует лишние сетевые запросы.

  2. Cache-first По умолчанию precacheAndRoute использует стратегию «cache-first», что означает: сначала проверяется кэш, затем сеть.

  3. Network-first для динамических данных Манифест не предназначен для динамического контента, который обновляется часто. Для таких ресурсов используются другие стратегии (например, через registerRoute).

Рекомендации по использованию

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

Взаимодействие с другими механизмами Workbox

Манифест предварительного кэширования тесно связан с:

  • Runtime caching — динамическое кэширование запросов, не включённых в манифест.
  • ExpirationPlugin — контроль срока хранения ресурсов в кэше.
  • BroadcastUpdatePlugin — уведомление клиентов о новых версиях закэшированных файлов.

Применение манифеста совместно с этими плагинами позволяет создавать PWA с высокой производительностью и надёжным управлением версиями.

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

Оглавление