Генерация файла Service Worker вручную через CLI

Для использования sw-precache через CLI необходимо сначала установить пакет глобально или локально в проекте:

npm install -g sw-precache

Или для локальной установки:

npm install --save-dev sw-precache

После установки можно приступать к генерации Service Worker. sw-precache работает на основе конфигурационного объекта, который можно передавать через CLI с использованием опции --config или напрямую через параметры командной строки.

Генерация Service Worker с помощью CLI

Для генерации файла Service Worker используется команда sw-precache с набором обязательных и опциональных аргументов. Основные параметры:

  • --root – корневая директория проекта, из которой будут взяты файлы для кэширования.
  • --static-file-globs – шаблоны файлов, которые необходимо включить в кэш.
  • --strip-prefix – префикс пути, который будет удалён из URL в Service Worker.
  • --runtime-caching – массив объектов с правилами динамического кэширования.

Пример простой команды:

sw-precache \
  --root=./public \
  --static-file-globs="public/**/*.{js,html,css,png,jpg}" \
  --strip-prefix=public/

Эта команда создаст файл service-worker.js в корне проекта, автоматически включая все файлы, соответствующие шаблону public/**/*.{js,html,css,png,jpg}, и удаляя префикс public/ из URL в кэше.

Опции конфигурации CLI

--verbose

Позволяет включить подробный вывод процесса генерации:

sw-precache --root=./public --static-file-globs="public/**/*" --strip-prefix=public/ --verbose

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

--cache-id

Позволяет задать уникальный идентификатор кэша. При изменении идентификатора старый кэш не будет использоваться, что обеспечивает корректное обновление Service Worker:

sw-precache --root=./public --static-file-globs="public/**/*" --cache-id=my-app-cache

--import-scripts

Позволяет подключить дополнительные скрипты к Service Worker:

sw-precache --root=./public --static-file-globs="public/**/*" --import-scripts="js/custom-sw.js"

Эта опция полезна для добавления логики, которая не может быть автоматически сгенерирована sw-precache, например, событий push или пользовательских обработчиков fetch.

Настройка Runtime Caching

Runtime Caching позволяет динамически кэшировать ресурсы по URL с использованием различных стратегий. CLI поддерживает передачу этих правил через JSON-файл или напрямую через командную строку.

Пример конфигурации через JSON:

{
  "runtimeCaching": [
    {
      "urlPattern": "/api/.*",
      "handler": "networkFirst",
      "options": {
        "cache": {
          "maxEntries": 50,
          "name": "api-cache"
        }
      }
    }
  ]
}

CLI-команда с использованием конфигурационного файла:

sw-precache --config=sw-config.json

Доступные стратегии кэширования:

  • networkFirst – сначала пробует загрузить с сети, при неудаче берёт из кэша.
  • cacheFirst – сначала ищет в кэше, при отсутствии делает сетевой запрос.
  • fastest – параллельно проверяет сеть и кэш, возвращает первый результат.
  • networkOnly и cacheOnly – чисто сетевые или чисто кэшированные подходы.

Исключение файлов и директорий

Для исключения определённых файлов используется опция --static-file-globs-ignore-patterns:

sw-precache \
  --root=./public \
  --static-file-globs="public/**/*" \
  --static-file-globs-ignore-patterns=".*\\.map$"

В этом примере все sourcemap-файлы .map будут исключены из кэша.

Инкрементальная генерация

sw-precache поддерживает инкрементальное обновление кэша, что уменьшает объём скачиваемых данных при обновлении Service Worker. Для этого рекомендуется:

  • Указывать --cache-id для версионирования.
  • Использовать --strip-prefix для корректного расчёта URL.
  • Включать только те файлы, которые реально должны быть кэшированы, через шаблоны --static-file-globs.

Отладка и тестирование

После генерации Service Worker важно убедиться, что он корректно работает:

  1. Подключить скрипт в HTML:
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(() => console.log('Service Worker зарегистрирован'))
      .catch(err => console.error('Ошибка регистрации SW:', err));
  }
</script>
  1. Использовать инструменты браузера (DevTools → Application → Service Workers) для проверки состояния кэша.
  2. Проверить, что добавленные runtime caching правила работают корректно через сеть и кэш.

sw-precache через CLI позволяет полностью контролировать процесс генерации Service Worker без использования сборщиков вроде Gulp или Webpack, обеспечивая гибкое управление статическим и динамическим кэшированием.

Оглавление