Установка через npm и yarn

Для работы с sw-precache первым шагом является его установка через пакетный менеджер. Библиотека доступна как в npm, так и в Yarn, что обеспечивает гибкость при интеграции в проект.

Установка через npm

  1. Проверка версии npm и Node.js Перед установкой необходимо убедиться, что установленные версии Node.js и npm соответствуют минимальным требованиям. Обычно достаточно Node.js версии 8 и выше, а npm версии 5 и выше. Проверка выполняется командами:

    node -v
npm -v

  2. Установка sw-precache в проект

    Для локальной установки, которая предпочтительна для проектов, выполняется команда:

    npm install sw-precache --save-dev

    Ключевой момент: использование флага --save-dev сохраняет зависимость в секции devDependencies файла package.json, так как sw-precache нужен только на этапе сборки и генерации сервис-воркера, но не в продакшн-коде.

  3. Проверка успешной установки

    После установки можно убедиться в наличии пакета, вызвав:

    npx sw-precache --help

    Вывод справки подтвердит, что пакет корректно установлен и готов к использованию.

Установка через Yarn

  1. Проверка версии Yarn Для корректной работы Yarn должна быть версии 1.22 или выше. Проверка выполняется:

    yarn -v

  2. Установка пакета

    Для локальной установки через Yarn используется команда:

    yarn add sw-precache --dev

    Аналогично npm, ключ --dev сохраняет пакет как девелоперскую зависимость.

  3. Проверка доступности команды

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

    yarn sw-precache --help

    Если справка выводится корректно, библиотека готова к генерации конфигурации сервис-воркера.

Отличия локальной и глобальной установки

  • Локальная установка (--save-dev или --dev) интегрирует sw-precache в проект, что позволяет использовать одинаковую версию для всех разработчиков команды и гарантирует совместимость с системой сборки (Webpack, Gulp, Grunt).
  • Глобальная установка (npm install -g sw-precache) делает команду доступной в любом месте системы, что удобно для тестирования или использования вне проекта, но может вызвать конфликты версий при работе с разными проектами.

Автоматизация через скрипты

Для упрощения запуска можно добавить команду в секцию scripts файла package.json:

{
  "scripts": {
    "generate-sw": "sw-precache --config=sw-precache-config.js"
  }
}

Теперь генерация сервис-воркера выполняется одной командой:

npm run generate-sw

или через Yarn:

yarn generate-sw

Проверка интеграции с системой сборки

Если проект использует Gulp или Webpack, sw-precache можно интегрировать напрямую в процесс сборки:

  • В Gulp создается задача:
const gulp = require('gulp');
const swPrecache = require('sw-precache');

gulp.task('generate-service-worker', function(callback) {
  swPrecache.write('public/service-worker.js', {
    staticFileGlobs: ['public/**/*.{js,css,html,png,jpg}'],
    stripPrefix: 'public/'
  }, callback);
});
  • В Webpack можно подключить через sw-precache-webpack-plugin, который использует ту же библиотеку под капотом.

Ключевые моменты установки

  • Всегда предпочтительнее локальная установка, чтобы версии пакета были фиксированы.
  • Флаг --save-dev или --dev отражает, что пакет используется только на этапе сборки.
  • Проверка доступности команды через --help подтверждает корректную установку.
  • Интеграция со сборщиками позволяет автоматизировать процесс генерации сервис-воркера без ручного запуска.

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

Оглавление