Параметр templateFilePath

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

Назначение и базовое использование

По умолчанию Sw-precache генерирует сервис-воркер, используя встроенный шаблон, который покрывает большинство сценариев кеширования статических ресурсов. Однако, когда требуется полная кастомизация логики сервис-воркера, включая обработку событий fetch, использование дополнительных стратегий кеширования или интеграцию с другими инструментами, стандартного шаблона недостаточно.

Параметр templateFilePath позволяет подключить свой шаблон .js файла, содержащий ES5/ES6 код сервис-воркера, который будет обработан Sw-precache для включения списка ресурсов, указанных в staticFileGlobs, и других конфигурационных параметров.

Пример базовой конфигурации с использованием templateFilePath:

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

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

В этом примере:

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

Структура пользовательского шаблона

Шаблон должен содержать специальные заполнители, которые Sw-precache заменяет на реальные данные во время генерации сервис-воркера:

  1. self.__precacheConfig — массив объектов с информацией о файлах для кеширования, включающий путь и контрольную сумму (hash).
  2. swToolbox — объект для расширенной работы с стратегиями кеширования через библиотеку sw-toolbox (если используется).

Пример минимального шаблона:

'use strict';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache-v1').then(function(cache) {
      return cache.addAll(self.__precacheConfig.map(function(entry) {
        return entry.url;
      }));
    })
  );
});

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

В этом примере:

  • self.__precacheConfig будет автоматически заменён на массив файлов, указанных в staticFileGlobs.
  • Логика установки и обработка запросов полностью кастомизируемая.

Взаимодействие с другими параметрами

Использование templateFilePath тесно связано с другими ключевыми параметрами:

  • staticFileGlobs — файлы из этого массива будут автоматически включены в кэш, независимо от того, как вы реализовали fetch.
  • stripPrefix — позволяет корректно формировать пути внутри шаблона.
  • handleFetch — если значение true, Sw-precache добавляет обработчик fetch, который можно интегрировать с вашим шаблоном; при false этот обработчик можно полностью реализовать вручную в шаблоне.

Важно учитывать, что все файлы, указанные в staticFileGlobs, будут вставлены в self.__precacheConfig, и именно этот массив следует использовать внутри пользовательского шаблона для корректного кеширования.

Продвинутые возможности

  1. Динамическое добавление логики кеширования: В шаблоне можно добавлять условия на основе типов ресурсов, например:
self.addEventListener('fetch', function(event) {
  if (event.request.url.endsWith('.png')) {
    event.respondWith(
      caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

  1. Интеграция с push-уведомлениями: Можно расширять шаблон для поддержки push и notificationclick событий.

  2. Использование внешних библиотек: Шаблон может импортировать importScripts('sw-toolbox.js') для использования готовых стратегий кеширования.

Рекомендации по использованию

  • Всегда проверять, что шаблон корректно обрабатывает self.__precacheConfig.
  • Использовать templateFilePath только при необходимости кастомной логики — для стандартного кеширования встроенный шаблон проще и безопаснее.
  • При обновлении шаблона необходимо пересоздать сервис-воркер и обновить версию кэша, чтобы избежать конфликтов с устаревшими файлами.
  • Разделять логику установки, активации и обработки fetch, чтобы избежать ошибок при обновлениях кэша.

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

Оглавление