Проверка офлайн-режима в CI-среде

Sw-precache — это инструмент для автоматической генерации сервис-воркера, который кэширует статические ресурсы веб-приложения, обеспечивая поддержку офлайн-режима. В контексте CI/CD важно, чтобы проверка офлайн-режима выполнялась автоматически на этапе сборки и тестирования, без необходимости ручного взаимодействия.

Для начала необходимо установить библиотеку через npm:

npm install sw-precache --save-dev

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

npm install -g sw-precache

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

module.exports = {
  staticFileGlobs: [
    'dist/**/*.html',
    'dist/**/*.js',
    'dist/**/*.css',
    'dist/images/**.*'
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /^https:\/\/api\.example\.com\//,
    handler: 'networkFirst'
  }],
  verbose: true
};
  • staticFileGlobs — шаблоны файлов для предварительного кэширования.
  • stripPrefix — убирает префикс из путей в сервис-воркере.
  • runtimeCaching — правила для динамических запросов.

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

Для автоматизации в CI достаточно добавить скрипт сборки сервис-воркера в package.json:

"scripts": {
  "generate-sw": "sw-precache --config=sw-precache-config.js"
}

В CI/CD пайплайне (например, Jenkins, GitLab CI, GitHub Actions) команда запускается как часть этапа сборки:

steps:
  - name: Install dependencies
    run: npm install
  - name: Generate service worker
    run: npm run generate-sw

Это гарантирует, что сервис-воркер всегда актуален и отражает текущие статические ресурсы проекта.

Проверка офлайн-режима

Для тестирования офлайн-режима в CI используется комбинация инструментов для эмуляции сетевых условий и запуска браузера в headless-режиме. Наиболее распространённый подход — использование Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Включение офлайн-режима
  await page.setOfflineMode(true);

  // Попытка загрузки страницы
  const response = await page.goto('http://localhost:8080');
  
  if (response.status() === 200) {
    console.log('Страница успешно загружена из кэша.');
  } else {
    console.error('Не удалось загрузить страницу офлайн.');
  }

  await browser.close();
})();

Ключевой момент — использование метода setOfflineMode(true), который имитирует отсутствие сети, а успешная загрузка страницы подтверждает корректную работу сервис-воркера.

Автоматизация тестов офлайн-режима

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

"scripts": {
  "test-offline": "node test-offline.js"
}

В пайплайне:

- name: Test offline mode
  run: npm run test-offline

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

Логирование и отчётность

Sw-precache поддерживает флаг verbose, который выводит подробный лог всех файлов, добавленных в кэш. Для CI полезно сохранять этот лог как артефакт сборки, чтобы отслеживать, какие ресурсы кэшируются:

sw-precache --config=sw-precache-config.js > sw-precache.log

В CI можно настроить уведомления или fail-проверку, если определённые ресурсы не попали в кэш.

Рекомендации по стабильной проверке в CI

  • Перед тестированием офлайн-режима убедиться, что сервер локальной сборки полностью поднят.
  • Использовать headless-браузеры для ускорения тестирования.
  • Проверять не только загрузку страницы, но и работу ключевых API-запросов через runtimeCaching.
  • Периодически обновлять staticFileGlobs в конфигурации, чтобы новые файлы автоматически попадали в кэш.

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

Оглавление