Кастомный шаблон Service Worker через templateFilePath

Библиотека sw-precache предназначена для автоматической генерации Service Worker, который кеширует статические ресурсы веб-приложения. Одним из самых гибких инструментов этой библиотеки является возможность использования кастомного шаблона Service Worker через опцию templateFilePath. Она позволяет полностью контролировать структуру и логику вашего Service Worker, сохраняя при этом автоматическое добавление списков ресурсов для кеширования.

Принцип работы templateFilePath

Опция templateFilePath указывает путь к файлу шаблона Service Worker, который будет использоваться sw-precache вместо стандартного шаблона. Этот шаблон должен быть обычным JavaScript-файлом, где специальными маркерами будут вставляться автоматически сгенерированные списки ресурсов, настройки кеша и обработчики событий.

Ключевые маркеры в шаблоне:

  • self.__precacheConfig — массив объектов, содержащих URL и версии ресурсов для кеширования.
  • self.addEventListener('install', ...) — обычно используется для установки Service Worker и предварительного кеширования.
  • self.addEventListener('activate', ...) — отвечает за удаление устаревших кешей и обновление активной версии.
  • self.addEventListener('fetch', ...) — перехватывает сетевые запросы и определяет стратегию отдачи ресурсов из кеша или сети.

Использование кастомного шаблона позволяет встроить любую дополнительную логику, например:

  • условное кеширование по типу файла
  • интеграцию с другими API браузера
  • динамическое управление стратегиями кеширования

Пример структуры шаблона

Файл шаблона может выглядеть следующим образом:

// template-sw.js

const CACHE_PREFIX = 'my-app-cache-';
const CACHE_VERSION = 'v1';

// маркер для sw-precache: автоматически будет вставлен массив ресурсов
self.__precacheConfig = [];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_PREFIX + CACHE_VERSION)
      .then(cache => cache.addAll(self.__precacheConfig.map(r => r.url)))
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key.startsWith(CACHE_PREFIX) && key !== CACHE_PREFIX + CACHE_VERSION)
            .map(key => caches.delete(key))
      )
    )
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response =>
      response || fetch(event.request)
    )
  );
});

Здесь видно, что sw-precache не трогает вашу структуру Service Worker, а лишь вставляет список файлов для кеширования в self.__precacheConfig.

Настройка sw-precache с кастомным шаблоном

Для использования кастомного шаблона нужно передать опцию templateFilePath при конфигурации генератора Service Worker. Пример конфигурации в Node.js:

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

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.{js,html,css,png,jpg,gif,svg}'
  ],
  stripPrefix: 'dist/',
  templateFilePath: 'template-sw.js',
  verbose: true
});

Здесь:

  • staticFileGlobs — массив файлов и папок для кеширования.
  • stripPrefix — удаляет часть пути в URL, чтобы структура кеша совпадала с корнем сайта.
  • templateFilePath — путь к кастомному шаблону Service Worker.

После выполнения swPrecache.write библиотека сгенерирует полноценный Service Worker с вашей логикой и автоматически вставит все файлы в self.__precacheConfig.

Варианты расширения логики

  1. Кеширование с динамическими стратегиями Можно добавить обработку запросов, например отдавать CSS и JS из кеша, а HTML всегда получать с сети:
self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.html')) {
    event.respondWith(fetch(event.request));
  } else {
    event.respondWith(
      caches.match(event.request).then(response => response || fetch(event.request))
    );
  }
});

  1. Логирование и аналитика Можно вставить console.log или отправку статистики при каждом обновлении кеша.

  2. Управление версиями кеша Использование переменных CACHE_VERSION и CACHE_PREFIX позволяет легко управлять версиями кеша и делать мягкие обновления.

Преимущества использования кастомного шаблона

  • Полный контроль над логикой Service Worker
  • Возможность внедрять сложные стратегии кеширования и обработки fetch
  • Совместимость с автоматической генерацией списка файлов для кеша
  • Удобство интеграции с другими инструментами и API браузера

Полезные советы

  • Всегда тестировать шаблон на локальном сервере через HTTPS, иначе Service Worker не будет работать.
  • При изменении структуры файлов стоит обновлять версию кеша (CACHE_VERSION), чтобы старые ресурсы не мешали.
  • Можно комбинировать кастомный шаблон с runtimeCaching в sw-precache, если требуется динамическое кеширование ресурсов из сети.

Использование templateFilePath делает Service Worker максимально гибким, позволяя объединить преимущества автоматического кеширования и собственных алгоритмов обработки запросов.

Оглавление