Ревизии файлов и хэширование

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

Принцип работы ревизий

При использовании Workbox для предкэширования ресурсов каждый файл передается в массив ресурсов с указанием его URL и опционально ревизии:

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 — уникальный идентификатор, чаще всего генерируемый автоматически на основе хэша содержимого файла.

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

Генерация хэшей

Хэширование файлов позволяет сервис-воркеру точно определять, какие файлы изменились. Workbox CLI и плагины для сборщиков, таких как Webpack, могут автоматически генерировать хэши на основе содержимого файлов:

  • Webpack + WorkboxPlugin:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      include: [/\.html$/, /\.js$/, /\.css$/],
    }),
  ],
};

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

Поведение при изменении файлов

При изменении содержимого файла хэш также меняется. При следующей активации сервис-воркера Workbox:

  1. Определяет, что хэш нового файла отличается от старого.
  2. Загружает новый файл и обновляет кэш.
  3. Удаляет старую версию ресурса из кэша.

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

Автоматическое обновление и управление кэшем

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

  • skipWaiting — сервис-воркер сразу активируется после установки.
  • clientsClaim — позволяет контролировать страницы без перезагрузки.
  • revision — изменение хэша запускает обновление кэша.

Пример:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST, {
  ignoreURLParametersMatching: [/^utm_/, /^fbclid$/]
});

self.__WB_MANIFEST генерируется автоматически при сборке и содержит список всех файлов с их хэшами.

Важные аспекты хэширования

  1. Стабильность URL URL ресурса должен оставаться неизменным, чтобы хэш служил единственным источником идентификации.

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

  3. Оптимизация объема кэша Удаление устаревших ресурсов предотвращает переполнение кэша и снижает нагрузку на устройство пользователя.

  4. Игнорирование параметров URL Workbox позволяет игнорировать параметры, которые не влияют на содержимое, предотвращая лишние перезаписи кэша.

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

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

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

Оглавление