Параметр staticFileGlobs и шаблоны путей

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

Назначение staticFileGlobs

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

Примеры значений staticFileGlobs:

staticFileGlobs: [
  'dist/**/*.js',
  'dist/**/*.css',
  'dist/images/**/*.{png,jpg,gif}',
  'dist/index.html'
]

В этом примере:

  • dist/**/*.js — кэшируются все JS-файлы в каталоге dist и во всех его подкаталогах.
  • dist/**/*.css — аналогично для CSS-файлов.
  • dist/images/**/*.{png,jpg,gif} — все изображения форматов PNG, JPG и GIF.
  • dist/index.html — конкретный HTML-файл.

Поддерживаемые шаблоны путей

sw-precache поддерживает несколько видов шаблонов:

  1. Звёздочка * — соответствует любому количеству символов в имени файла или папки, кроме символа /. Пример: dist/*.js кэширует все JS-файлы непосредственно в папке dist, но не в подкаталогах.

  2. Двойная звёздочка ** — рекурсивный поиск по подкаталогам. Пример: dist/**/*.js ищет файлы в dist и всех вложенных папках.

  3. Скобки {} — множественный выбор вариантов по расширению или имени файла. Пример: dist/images/*.{png,jpg,gif} кэширует файлы указанных форматов.

  4. Вопрос ? — заменяет ровно один символ в имени файла. Пример: file?.js подходит для file1.js, fileA.js, но не для file10.js.

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

  • Фокус на критических ресурсах: в кэш следует включать только файлы, которые нужны для первичной загрузки страницы, чтобы не перегружать кэш.
  • Исключение временных файлов: файлы вроде *.map или временные сборки лучше не включать. Для этого используется параметр ignoreUrlParametersMatching.
  • Оптимизация шаблонов: вместо указания отдельных файлов рекомендуется использовать маски с ** и {} для охвата целых каталогов.

Пример оптимальной конфигурации:

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/**/*.css',
    'dist/**/*.js',
    'dist/images/**/*.{png,jpg,gif,svg}',
    'dist/fonts/**/*.{woff,woff2,ttf}'
  ],
  stripPrefix: 'dist/'
});

Важное замечание: stripPrefix удаляет указанную часть пути из ключей кэша, чтобы адреса в кэше соответствовали URL в приложении. Например, путь dist/css/main.css после применения stripPrefix: 'dist/' будет кэширован как /css/main.css.

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

  • navigateFallback — позволяет указать HTML-файл, который будет возвращаться при навигации к отсутствующим страницам. Кэшируемые через staticFileGlobs файлы часто включают этот fallback.
  • runtimeCaching — для динамического кэширования ресурсов, которые не входят в staticFileGlobs.
  • stripPrefix и replacePrefix — изменяют путь к файлу в кэше без изменения структуры на диске.

Особенности и подводные камни

  • Использование ** для большого каталога с миллионами файлов может замедлить процесс генерации сервис-воркера. В таких случаях рекомендуется явно ограничивать подкаталоги или использовать ignorePatterns.
  • Маски чувствительны к регистру файловой системы. На Windows и macOS это может работать иначе, чем на Linux-серверах.
  • Шаблоны не поддерживают регулярные выражения напрямую. Для более сложных фильтров нужно комбинировать staticFileGlobs с ignorePatterns.

staticFileGlobs является ядром управления предзагрузкой файлов в sw-precache, позволяя точно контролировать офлайн-доступность ресурсов и оптимизировать работу сервис-воркера.

Оглавление