Проверка корректности установки

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

1. Проверка версии и доступности пакета

Первым шагом является проверка того, что пакет установлен и доступен через командную строку. Для этого выполняется команда:

npx sw-precache --version

или, если установлен глобально:

sw-precache --version

Ключевой момент: команда должна вернуть номер версии установленного пакета. Если вместо этого возникает ошибка command not found, необходимо проверить путь установки или выполнить установку повторно через npm install sw-precache --save-dev.

2. Создание минимальной конфигурации

Для проверки работоспособности удобно создать минимальный конфигурационный файл sw-precache-config.js:

module.exports = {
  staticFileGlobs: [
    'index.html',
    'styles/**/*.css',
    'scripts/**/*.js',
    'images/**/*.{png,jpg,gif,svg}'
  ],
  stripPrefix: './',
  runtimeCaching: [{
    urlPattern: /\/api\//,
    handler: 'networkFirst'
  }]
};

Выделение ключевого момента: даже минимальная конфигурация должна содержать:

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

3. Генерация сервис-воркера

Для проверки генерации выполняется команда:

npx sw-precache --config=sw-precache-config.js

В результате в корневой папке проекта должен появиться файл service-worker.js.

Важные моменты для проверки:

  • Файл должен содержать сгенерированные массивы precacheConfig, включающие все указанные ресурсы.
  • Должны присутствовать функции addToCacheList и install с обработчиками событий сервис-воркера.
  • Если файл пустой или содержит ошибки синтаксиса, следует проверить пути в staticFileGlobs и корректность конфигурационного файла.

4. Подключение сервис-воркера к HTML

Для проверки корректной регистрации сервис-воркера создается скрипт подключения в index.html:

Ключевые моменты для диагностики:

  • В консоли браузера должно появиться сообщение об успешной регистрации.
  • В случае ошибки 404 или SecurityError необходимо проверить путь к service-worker.js и протокол (сервис-воркеры работают только по HTTPS или на localhost).

5. Проверка кэширования ресурсов

После успешной регистрации сервис-воркера проверка кэширования выполняется через инструменты разработчика браузера:

  1. Открыть вкладку Application → Service Workers.
  2. Проверить статус service-worker.js.
  3. В разделе Cache Storage убедиться, что все указанные в staticFileGlobs ресурсы присутствуют.

Выделение ключевого момента: если какие-либо файлы отсутствуют, это может указывать на некорректно указанные пути или ошибки в маске файлов (**/*.js vs *.js).

6. Тестирование работы offline

Для окончательной проверки необходимо эмулировать offline-режим:

  1. В инструментах разработчика включить Offline в Network.
  2. Обновить страницу и убедиться, что ресурсы загружаются из кэша.
  3. Проверить консоль на наличие ошибок Failed to fetch — их быть не должно.

Важно: для динамических запросов с runtimeCaching можно временно отключить интернет и убедиться, что стратегия networkFirst корректно возвращает кэш при недоступности сети.

7. Проверка обновления сервис-воркера

Для подтверждения корректной работы обновления:

  1. Внести изменения в любой статический файл (например, styles/main.css).
  2. Перегенерировать сервис-воркер командой sw-precache.
  3. Обновить страницу и убедиться, что новая версия ресурсов закэширована, а старая заменена.

Ключевой момент: сервис-воркер обновляет кэш только после окончания жизненного цикла текущей версии (install → activate). Проверка через Application → Service Workers → Update on reload позволяет ускорить тестирование.

Оглавление