Интеграция с Gulp: базовая настройка

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

npm install sw-precache --save-dev

Также понадобится пакет gulp, если он ещё не используется в проекте:

npm install gulp --save-dev

После установки создаётся файл Gulp-заданий, например gulpfile.js. В нём подключается модуль:

const gulp = require('gulp');
const swPrecache = require('sw-precache');

Настройка генерации сервис-воркера

Sw-precache позволяет автоматически создавать сервис-воркер, который кэширует статические ресурсы сайта. Основной метод — swPrecache.write, который принимает путь к файлу сервис-воркера и объект конфигурации:

gulp.task('generate-service-worker', function(callback) {
    swPrecache.write('service-worker.js', {
        staticFileGlobs: [
            'dist/**/*.html',
            'dist/**/*.js',
            'dist/**/*.css',
            'dist/images/**/*.{png,jpg,gif,svg}'
        ],
        stripPrefix: 'dist/',
        navigateFallback: '/index.html',
        runtimeCaching: [{
            urlPattern: /\/api\/.*\/*.json/,
            handler: 'networkFirst'
        }]
    }, callback);
});

Ключевые параметры:

  • staticFileGlobs — массив путей к файлам, которые будут кэшированы. Можно использовать маски с подстановочными символами (**, *), что удобно для кэширования целых папок.

  • stripPrefix — удаляет указанную часть пути при записи в кэш, чтобы пути в сервис-воркере соответствовали структуре сайта.

  • navigateFallback — путь к файлу, который будет возвращаться при навигации на несуществующие URL. Обычно используется для SPA.

  • runtimeCaching — массив правил динамического кэширования. Каждое правило содержит:

    • urlPattern — регулярное выражение для URL.
    • handler — стратегия кэширования: networkFirst, cacheFirst, fastest, networkOnly, cacheOnly.

Интеграция с Gulp-сборкой

Чтобы автоматизировать процесс, задачу генерации сервис-воркера удобно привязать к другим задачам сборки, например после копирования файлов в папку dist:

gulp.task('build', gulp.series('copy-files', 'generate-service-worker'));

Таким образом, при запуске gulp build сначала создаются все файлы сайта, а затем автоматически создаётся сервис-воркер, готовый к кэшированию.

Дополнительные параметры конфигурации

Sw-precache поддерживает множество опций для тонкой настройки:

  • cacheId — уникальный идентификатор кэша, используется при обновлении.
  • maximumFileSizeToCacheInBytes — максимальный размер файлов для кэширования.
  • ignoreUrlParametersMatching — массив регулярных выражений, параметры URL которых будут игнорироваться при кэшировании.
  • handleFetch — флаг, указывающий, обрабатывать ли запросы через сервис-воркер (true по умолчанию).

Пример расширенной конфигурации:

swPrecache.write('service-worker.js', {
    staticFileGlobs: ['dist/**/*.{html,js,css}'],
    stripPrefix: 'dist/',
    cacheId: 'my-app-cache-v1',
    maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // 5MB
    ignoreUrlParametersMatching: [/utm_source/, /ref/],
    navigateFallback: '/index.html'
}, callback);

Обновление сервис-воркера

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

Логирование и отладка

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

gulp.task('generate-service-worker', function(callback) {
    swPrecache.write('service-worker.js', {
        staticFileGlobs: ['dist/**/*.{html,js,css}'],
        stripPrefix: 'dist/'
    }, function() {
        console.log('Service worker создан и кэш готов.');
        callback();
    });
});

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

Оглавление