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

Для интеграции sw-precache в процесс сборки проекта с Grunt используется специальный пакет grunt-sw-precache. Он служит обёрткой над библиотекой sw-precache, позволяя генерировать сервис-воркеры непосредственно в задачах Grunt.

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

npm install grunt-sw-precache --save-dev

После установки необходимо подключить плагин в конфигурации Grunt:

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-sw-precache');
};

Основная конфигурация задачи

Задача swPrecache создаёт файл сервис-воркера, который автоматически кэширует указанные ресурсы. Конфигурация состоит из обязательных и опциональных параметров:

grunt.initConfig({
    swPrecache: {
        options: {
            cacheId: 'my-project',            // Уникальный идентификатор кэша
            directoryIndex: 'index.html',     // Файл по умолчанию для корневого URL
            stripPrefix: 'dist/',             // Убирает префикс из пути при генерации манифеста
            runtimeCaching: [{
                urlPattern: /\/api\//,
                handler: 'networkFirst'
            }],
            verbose: true                     // Вывод подробной информации о процессе генерации
        },
        all: {
            staticFileGlobs: [
                'dist/**/*.html',
                'dist/**/*.js',
                'dist/**/*.css',
                'dist/images/**/*.{png,jpg,gif,svg}'
            ],
            swFilePath: 'dist/service-worker.js'
        }
    }
});

Разбор ключевых опций:

  • cacheId — используется для идентификации кэша. Если кэш с таким идентификатором уже существует, он будет перезаписан.

  • directoryIndex — указывает, какой файл будет обслуживаться при обращении к корневой директории.

  • stripPrefix — позволяет удалить лишний путь из URL при генерации манифеста кэша. Например, если ресурсы лежат в dist/, этот префикс будет удалён, чтобы URL в манифесте начинались с относительного пути.

  • runtimeCaching — массив правил для динамического кэширования. Каждое правило содержит urlPattern (регулярное выражение для совпадения с URL) и handler (стратегия кэширования). Поддерживаются стратегии:

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

  • verbose — вывод подробного лога позволяет отследить какие файлы попали в кэш и проверить работу шаблонов.

  • staticFileGlobs — список шаблонов для статических файлов, которые будут включены в кэш. Поддерживаются glob-шаблоны для HTML, JS, CSS, изображений и других ресурсов.

  • swFilePath — путь, по которому будет создан файл сервис-воркера.

Встраивание задачи в сборку

Чаще всего генерация сервис-воркера выполняется после сборки проекта. Пример последовательности задач:

grunt.registerTask('build', [
    'clean:dist',
    'copy:dist',
    'uglify',
    'cssmin',
    'swPrecache'
]);

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

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

  1. Игнорирование файлов Можно исключить из кэша определённые файлы с помощью опции ignoreUrlParametersMatching или dontCacheBustUrlsMatching. Например, для исключения файлов с query-параметрами:
ignoreUrlParametersMatching: [/utm_/],
dontCacheBustUrlsMatching: /vendors\.js$/
  1. Минимизация размера файла сервис-воркера Если проект содержит большое количество ресурсов, можно использовать параметр stripPrefixMulti для одновременного удаления нескольких префиксов:
stripPrefixMulti: {
    'dist/': '',
    'bower_components/': 'vendor/'
}
  1. Поддержка HTTPS и прокси В sw-precache можно указывать базовый URL для генерации абсолютных путей, что удобно при работе с поддоменами или обратными прокси:
rootDir: 'dist',
handleFetch: true

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

После генерации сервис-воркера рекомендуется проверить его работу локально. Запуск сервера через http-server или аналогичный инструмент и проверка консоли браузера позволяет увидеть:

  • какие файлы попали в кэш,
  • работают ли стратегии runtimeCaching,
  • корректно ли обрабатываются маршруты.

Для удобства можно включить параметр verbose: true, чтобы Grunt выводил полные логи процесса кэширования.

Оглавление