Метод precacheAndRoute

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

Основной синтаксис

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute([
  { url: '/index.html', revision: '123456' },
  { url: '/styles/main.css', revision: 'abcdef' },
  { url: '/scripts/app.js', revision: '7890ab' }
]);

Параметры:

  • Массив объектов { url, revision } — список ресурсов, которые необходимо кэшировать.

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

  • Опциональные параметры могут задавать стратегии работы с кэшем или фильтры по URL.

Как работает precacheAndRoute

  1. Установка Service Worker При установке Service Worker Workbox обходит список ресурсов, указанных в precacheAndRoute, и сохраняет их в специальном кэше.

  2. Активация Service Worker После активации кэш становится доступен для обработки сетевых запросов.

  3. Обработка запросов Когда браузер делает запрос к ресурсам, указанным в precache, Workbox:

    • Проверяет наличие ресурса в кэше.
    • Если ресурс есть — возвращает его мгновенно.
    • Если ресурс отсутствует — делает сетевой запрос и при необходимости добавляет его в кэш (в зависимости от настроек).

Примеры использования

Базовое кэширование страниц и стилей:

precacheAndRoute([
  { url: '/index.html', revision: '1' },
  { url: '/about.html', revision: '2' },
  { url: '/styles/main.css', revision: '1' }
]);

Автоматическое кэширование файлов сборки Webpack:

Workbox может интегрироваться с Webpack через плагин InjectManifest. При сборке плагин автоматически генерирует манифест файлов с их ревизиями:

precacheAndRoute(self.__WB_MANIFEST);

Здесь self.__WB_MANIFEST — массив объектов {url, revision}, который формируется во время сборки.

Контроль версий кэша

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

Работа с динамическими запросами

Метод precacheAndRoute предназначен только для статических ресурсов, ревизируемых при сборке. Для динамического контента лучше использовать registerRoute и стратегии кэширования (CacheFirst, NetworkFirst, StaleWhileRevalidate) из workbox-routing и workbox-strategies.

Настройка кэширования

Можно добавить дополнительные параметры для изменения поведения кэша:

precacheAndRoute([
  { url: '/index.html', revision: '1' },
  { url: '/styles/main.css', revision: '1' }
], {
  directoryIndex: 'index.html',
  cleanURLs: true
});
  • directoryIndex — определяет файл по умолчанию для URL без явного имени файла.
  • cleanURLs — автоматически убирает .html из URL в кэше.

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

  • precacheAndRoute работает совместно с skipWaiting() и clientsClaim() для мгновенного обновления Service Worker после новой версии.
  • Используется вместе с workbox-expiration для ограничения размера кэша и удаления устаревших ресурсов.

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

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

precacheAndRoute обеспечивает эффективное и надежное кэширование ресурсов, минимизируя сетевые запросы и ускоряя загрузку веб-приложений. Грамотное использование этого метода позволяет создать полностью оффлайн-доступный пользовательский опыт без сложной ручной настройки Service Worker.

Оглавление