Параметр root и работа с базовыми путями

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

Назначение параметра root

Параметр root задаёт корневую директорию, относительно которой Sw-precache формирует пути к ресурсам. Он особенно важен при использовании вложенных папок и нестандартной структуры проекта, когда файлы, предназначенные для кэширования, находятся не в корне веб-сервера, а, например, в dist или build.

Пример структуры проекта:

project/
├─ build/
│  ├─ index.html
│  ├─ main.js
│  └─ styles.css
└─ sw.js

При таком расположении файлов установка root на build позволит сервис-воркеру корректно ссылаться на все ресурсы без необходимости указывать полный путь от корня проекта.

swPrecache.write('sw.js', {
  staticFileGlobs: ['**/*.html', '**/*.js', '**/*.css'],
  root: 'build'
});

Здесь root: 'build' гарантирует, что пути к файлам будут строиться относительно папки build, а не корневой директории project.

Формирование относительных и абсолютных путей

Sw-precache генерирует кэшированные URL на основе двух параметров: staticFileGlobs и root.

  • staticFileGlobs — шаблоны файлов, подлежащих кэшированию.
  • root — точка отсчёта для формирования относительных путей.

Если не указать root, пути к ресурсам будут включать полный путь от рабочей директории Node.js. Это часто приводит к тому, что URL в сервис-воркере не совпадают с реальной структурой веб-сервера.

Пример без указания root:

/Users/user/project/build/index.html
/Users/user/project/build/main.js

Пример с root: 'build':

/index.html
/main.js

Выбор корректного значения root упрощает работу с кэшированными ресурсами и позволяет использовать более чистые URL, соответствующие маршрутам веб-приложения.

Влияние на stripPrefix и stripPrefixMulti

Часто вместе с root используют stripPrefix, чтобы убрать лишние части пути при кэшировании:

swPrecache.write('sw.js', {
  staticFileGlobs: ['build/**/*.html', 'build/**/*.js', 'build/**/*.css'],
  root: 'build',
  stripPrefix: 'build/'
});
  • stripPrefix удаляет указанную часть пути из URL в сервис-воркере.
  • При правильной настройке root и stripPrefix можно добиться, чтобы кэшированные URL точно соответствовали относительным адресам веб-приложения.

Параметр stripPrefixMulti позволяет задавать несколько префиксов для удаления, что удобно для проектов с разнородными исходными структурами.

Работа с вложенными директориями

Если проект содержит вложенные папки, root обеспечивает корректное отображение пути без необходимости вручную переписывать URL.

Пример структуры с вложенными папками:

build/
├─ index.html
├─ js/
│  └─ app.js
└─ css/
   └─ style.css

Настройка сервис-воркера:

swPrecache.write('sw.js', {
  staticFileGlobs: ['build/**/*.html', 'build/**/*.js', 'build/**/*.css'],
  root: 'build',
  stripPrefix: 'build/'
});

В результате URL для кэширования будут:

/index.html
/js/app.js
/css/style.css

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

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

  1. Всегда указывать root, если файлы проекта находятся не в корне проекта Node.js.
  2. Сочетать с stripPrefix, чтобы удалить лишние сегменты пути из кэшированных URL.
  3. Проверять структуру итогового сервис-воркера, чтобы убедиться, что все URL соответствуют маршрутам приложения.
  4. Для проектов с несколькими исходными папками использовать stripPrefixMulti совместно с root.

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

Оглавление