Кэширование шрифтов и сторонних ресурсов

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

Кэширование шрифтов

Шрифты являются критически важными ресурсами, влияющими на рендеринг страницы. Некорректная работа с ними может привести к FOUT (Flash of Unstyled Text) или FOIT (Flash of Invisible Text). Sw-precache позволяет заранее указать, какие шрифты должны быть закэшированы, и задать стратегию их обновления.

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

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

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'index.html',
    'styles/**/*.css',
    'scripts/**/*.js',
    'fonts/**/*.woff2',
    'fonts/**/*.woff'
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [{
    urlPattern: /^https:\/\/fonts\.googleapis\.com/,
    handler: 'cacheFirst',
    options: {
      cache: {
        maxEntries: 10,
        name: 'google-fonts-stylesheets',
        maxAgeSeconds: 60 * 60 * 24 * 365 // 1 год
      }
    }
  }, {
    urlPattern: /^https:\/\/fonts\.gstatic\.com/,
    handler: 'cacheFirst',
    options: {
      cache: {
        maxEntries: 20,
        name: 'google-fonts-webfonts',
        maxAgeSeconds: 60 * 60 * 24 * 365
      }
    }
  }]
});
  • staticFileGlobs — массив локальных файлов для кэширования. Сюда включаются шрифты, CSS и JS.
  • runtimeCaching — правила для динамических ресурсов, загружаемых с внешних серверов.
  • cacheFirst — стратегия «сначала кэш», используется для редко изменяющихся ресурсов, таких как шрифты.
  • maxAgeSeconds — время жизни кэша в секундах, после которого ресурс будет обновлен.

Такой подход гарантирует, что шрифты Google Fonts будут загружены один раз и использоваться повторно без лишних сетевых запросов.

Кэширование сторонних ресурсов (CDN)

Веб-приложения часто используют JavaScript-библиотеки и CSS-фреймворки с внешних CDN. При неправильной конфигурации сервис-воркера могут возникнуть конфликты версий и ошибки загрузки.

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

  1. Cache First — применяется для ресурсов с редким обновлением (например, библиотека jQuery).
  2. Network First — предпочтительно для ресурсов, которые часто обновляются (например, JSON API или аналитика).

Пример конфигурации сторонних ресурсов

runtimeCaching: [{
  urlPattern: /^https:\/\/cdnjs\.cloudflare\.com\/ajax\/libs\/jquery\/.*\.js/,
  handler: 'cacheFirst',
  options: {
    cache: {
      maxEntries: 5,
      name: 'jquery-cdn-cache',
      maxAgeSeconds: 60 * 60 * 24 * 30 // 30 дней
    }
  }
}, {
  urlPattern: /^https:\/\/stackpath\.bootstrapcdn\.com\/.*\.css/,
  handler: 'cacheFirst',
  options: {
    cache: {
      maxEntries: 3,
      name: 'bootstrap-cdn-cache',
      maxAgeSeconds: 60 * 60 * 24 * 30
    }
  }
}]

Важно: всегда указывать maxEntries, чтобы избежать переполнения кэша и ошибок при загрузке новых версий.

Советы по оптимизации кэша

  • Разделение кэшей: хранить шрифты и сторонние библиотеки в отдельных кэшах (google-fonts-webfonts, jquery-cdn-cache) для удобства управления и очистки.
  • Контроль версий: при изменении версии стороннего ресурса рекомендуется менять имя кэша или добавлять хэш в URL. Это предотвращает использование устаревшей версии.
  • Предварительная загрузка (precache): локальные шрифты и ключевые CSS-файлы следует включать в staticFileGlobs, чтобы они сразу попадали в кэш при установке сервис-воркера.
  • Мониторинг кэша: периодически проверять размер кэшей и удалять устаревшие записи, используя методы caches.delete() и caches.keys().

Особенности работы с Google Fonts

  • Google Fonts используют отдельные домены для CSS (fonts.googleapis.com) и шрифтов (fonts.gstatic.com).
  • CSS-файлы содержат правила для загрузки шрифтов через @font-face. Поэтому CSS необходимо кэшировать с cacheFirst, чтобы избежать повторных сетевых запросов.
  • Webfont-файлы следует кэшировать длительное время (год или больше), так как их содержимое редко меняется.

Отладка кэширования

  • Использовать Chrome DevTools → Application → Cache Storage для проверки активных кэшей.
  • Проверять загружаемые ресурсы на вкладке Network с фильтром Service Worker.
  • При обновлении сервис-воркера учитывать «stale-while-revalidate» стратегию для динамических ресурсов, чтобы пользователь получал актуальные данные без задержек.

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

Оглавление