Ограничения объёма precache

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

Максимальный размер одного ресурса

Каждый файл, добавляемый в precache, имеет ограничение по размеру, которое зависит от браузера и его возможностей по работе с Service Worker Cache API. На практике рекомендуется:

  • Ограничивать размер отдельного файла до 5–10 МБ.
  • Файлы больше этого размера могут не кэшироваться корректно или вызвать сбои в установке Service Worker.
  • Большие медиафайлы лучше загружать динамически, используя стратегию runtime caching.

Это ограничение напрямую связано с тем, что браузеры хранят кэш в пределах квоты дискового пространства для сайта. Превышение квоты приводит к неудачам установки Service Worker или автоматическому удалению старых кэшей.

Общий объём precache

Workbox сам по себе не накладывает жёстких ограничений на общий объём precache, но браузеры имеют встроенные лимиты:

  • Chrome: около 50–60% свободного пространства на устройстве, распределяемого между всеми сайтами.
  • Safari: ограничение может составлять 50 МБ для каждого домена, особенно на мобильных устройствах.
  • Firefox: динамическое распределение до нескольких сотен мегабайт, но с возможностью автоматической очистки старого кэша.

Если precache превышает доступную квоту, Service Worker может не завершить установку, что приведёт к тому, что приложение будет работать без кэшированных ресурсов.

Ограничения по количеству ресурсов

Workbox не накладывает ограничений на количество ресурсов, которые можно добавить в precache, но на практике:

  • Слишком большое количество мелких файлов увеличивает нагрузку на установку Service Worker.
  • Каждый ресурс требует отдельного запроса и записи в IndexedDB (основа для Cache Storage), что замедляет процесс и повышает вероятность ошибок.

Рекомендуется объединять мелкие скрипты и стили в бандлы, чтобы уменьшить количество кэшируемых объектов.

Влияние на производительность

Precache большого объёма напрямую влияет на:

  • Время установки Service Worker: чем больше ресурсов, тем дольше установка.
  • Потребление памяти браузера: большие кэши могут замедлять работу при одновременном открытии нескольких вкладок.
  • Обновление ресурсов: Workbox автоматически проверяет хеши файлов при обновлении. Большой precache увеличивает время проверки изменений.

Оптимизация заключается в разделении ресурсов на precache и runtime cache. Критические для работы приложения ресурсы помещаются в precache, остальные загружаются по мере необходимости.

Настройка лимитов в Workbox

Хотя Workbox не блокирует добавление больших файлов, можно использовать конфигурацию и фильтры:

import { precacheAndRoute } from 'workbox-precaching';

// Игнорировать файлы больше 5 МБ
const MAX_SIZE = 5 * 1024 * 1024;

precacheAndRoute(
  self.__WB_MANIFEST.filter(entry => entry.size <= MAX_SIZE)
);
  • entry.size может быть задан вручную при генерации манифеста.
  • Фильтрация крупных ресурсов предотвращает превышение квот браузера.

Также возможно использовать runtime caching для больших файлов, например, видео, изображения или библиотек третьих сторон.

Практические рекомендации

  1. Разделять ресурсы по важности: критические файлы в precache, остальные через runtime cache.
  2. Минимизировать количество файлов: объединять скрипты и стили.
  3. Контролировать размер отдельных файлов: избегать больших бандлов >10 МБ.
  4. Использовать фильтры при генерации манифеста для исключения ненужных или больших ресурсов.
  5. Мониторить ошибки установки Service Worker и использовать инструменты DevTools для анализа кэша.

Эти ограничения помогают поддерживать стабильность работы приложения, предотвращают превышение квот браузера и обеспечивают быструю установку Service Worker, что критически важно для производительности современных PWA.

Оглавление