Lighthouse: аудит PWA и оценка кэширования

Sw-precache — это инструмент для генерации сервис-воркеров, которые автоматически кэшируют ресурсы веб-приложения, обеспечивая его работу в офлайн-режиме и улучшая показатели производительности при повторных посещениях. Он тесно интегрируется с концепцией Progressive Web App (PWA) и позволяет управлять стратегиями кэширования, минимизируя ручное вмешательство.

Ключевые функции:

  • Генерация service-worker.js с заранее определёнными правилами кэширования.
  • Поддержка версионирования кэша и автоматического обновления ресурсов.
  • Интеграция с различными сборщиками, включая Webpack и Gulp.
  • Возможность фильтрации файлов по расширению, пути или имени.

Конфигурация Sw-precache

Настройка Sw-precache осуществляется через объект конфигурации, передаваемый в функцию swPrecache.write. Основные параметры:

  • staticFileGlobs — массив путей к файлам, которые необходимо закэшировать. Можно использовать шаблоны, например: ['./index.html', './css/**/*.css', './js/**/*.js'].

  • stripPrefix — удаляет указанную часть пути при сохранении файлов в кэше, полезно при деплое в подпапки.

  • runtimeCaching — массив объектов, определяющих стратегии кэширования для запросов, которые не входят в staticFileGlobs.

    • urlPattern — регулярное выражение для сопоставления URL.
    • handler — стратегия обработки запроса: cacheFirst, networkFirst, fastest.

  • navigateFallback — URL, который будет возвращён при навигации к несуществующему маршруту, поддерживая SPA.

  • stripPrefixMulti — позволяет задавать несколько префиксов для очистки путей.

  • verbose — логирование процесса генерации сервис-воркера.

Пример конфигурации:

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

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

Стратегии кэширования

Выбор стратегии кэширования зависит от типа ресурса и требований к обновлению данных:

  • Cache First — сначала проверяется кэш, затем сеть. Эффективно для статических ресурсов (CSS, JS, изображения), снижает нагрузку на сервер.
  • Network First — сначала обращение к сети, при сбое используется кэш. Подходит для динамических данных, API-запросов.
  • Fastest — параллельный запрос к сети и кэшу, возвращается тот, что отвечает быстрее. Баланс между скоростью и актуальностью.
  • Cache Only / Network Only — узкоспециализированные стратегии, применяются редко, когда ресурс не изменяется или сеть недоступна.

Взаимодействие с Lighthouse

Lighthouse оценивает PWA по нескольким критериям, включая наличие сервис-воркера и правильность кэширования:

  1. Service Worker Installed — Sw-precache автоматически создаёт сервис-воркер, который регистрируется при инициализации приложения.
  2. Offline Availability — все файлы из staticFileGlobs доступны в офлайн-режиме.
  3. Efficient Cache Policy — правильное использование стратегий кэширования для ускорения загрузки страниц и снижения числа сетевых запросов.
  4. Update on Change — Sw-precache создаёт уникальные хэши для файлов, что позволяет Lighthouse отмечать их как актуальные при изменениях.

Оптимизация кэша

Для максимальной эффективности и соответствия рекомендациям Lighthouse необходимо:

  • Минимизировать количество файлов в staticFileGlobs: кэшировать только необходимые ресурсы.
  • Использовать versioning или hash в именах файлов: предотвращает использование устаревшего кэша.
  • Настраивать runtimeCaching для API и динамических ресурсов: применять networkFirst с разумными таймаутами.
  • Регулярно пересобирать сервис-воркер при изменении контента.

Пример динамического кэширования:

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

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

  • Custom logging — использование параметра logger для детального анализа процесса генерации кэша.
  • Handle fetch failures — настройка fallback для конкретных URL при отсутствии сети.
  • Integration с Gulp/Webpack — позволяет автоматизировать сборку сервис-воркера как часть CI/CD.

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

Оглавление