Интеграция в существующий проект

Для начала работы с библиотекой sw-precache необходимо добавить её в проект через npm:

npm install sw-precache --save-dev

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

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

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'index.html',
    'styles/**/*.css',
    'scripts/**/*.js',
    'images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst'
  }]
});

Ключевые моменты:

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

Интеграция в процесс сборки

Для проектов с системами сборки, такими как Webpack или Gulp, sw-precache можно использовать как часть pipeline:

Gulp-пример:

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

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

Особенности интеграции:

  • Скрипт генерирует service-worker.js после сборки проекта.
  • В staticFileGlobs рекомендуется включать только необходимые для оффлайн работы файлы, чтобы не раздувать кэш.
  • При изменении файлов service worker нужно пересобирать, иначе обновления не попадут в кэш.

Настройка стратегий кэширования

sw-precache поддерживает несколько стратегий кэширования:

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

Пример использования:

runtimeCaching: [
  {
    urlPattern: /\/images\/.*/,
    handler: 'cacheFirst'
  },
  {
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst'
  }
]

Такой подход позволяет:

  • Ускорить загрузку статических ресурсов.
  • Обеспечить работу оффлайн для критически важных страниц.
  • Обновлять динамические данные с минимальной задержкой.

Обновление service worker

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

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.{js,css,html,png,jpg,gif,svg}'
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /\/api\/.*$/,
    handler: 'networkFirst'
  }],
  verbose: true
});

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

Подключение service worker в проект

В файле входа приложения (например, index.js) добавляется регистрация service worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker зарегистрирован с областью:', registration.scope);
    })
    .catch(function(error) {
      console.error('Регистрация Service Worker не удалась:', error);
    });
}

Важные моменты:

  • Регистрация должна выполняться после загрузки DOM.
  • Service worker работает только по HTTPS или на локальном хосте.
  • Любые изменения service-worker.js вызывают событие updatefound, что позволяет контролировать обновления кэша.

Интеграция с динамическим контентом

Для сайтов с динамическим контентом важно настроить runtime caching:

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

Здесь:

  • maxEntries ограничивает количество записей в кэше.
  • name задаёт имя кэша для удобного управления.
  • networkFirst обеспечивает актуальность данных при доступности сети, но позволяет работать оффлайн при отсутствии соединения.

Советы по интеграции в существующий проект

  • Разделять статические и динамические ресурсы, чтобы не блокировать загрузку критичного контента.
  • Использовать stripPrefix и точные шаблоны в staticFileGlobs для минимизации размера кэша.
  • Проверять работу service worker в разных браузерах и режимах оффлайн.
  • Обновлять service worker при изменении основных файлов проекта.
  • Включать логирование через verbose для отладки и контроля процесса генерации.
Оглавление