Все браузеры накладывают верхний предел объема хранилища, который разрешено использовать источнику вашего веб-приложения. Вы можете настроить Workbox для автоматической очистки данных, которые он кэширует во время выполнения, чтобы избежать ограничений квоты хранилища, которые могут повлиять на эффективность кэширования и надежность вашего веб-сайта.
Какие параметры конфигурации поддерживаются?
При настройке стратегии кэширования маршрута и среды выполнения вы можете добавить экземпляр ExpirationPlugin из workbox-expiration настроенный с настройками, которые наиболее подходят для типа кэшируемых вами ресурсов.
Например, следующая конфигурация может использоваться для кэширования изображений во время выполнения как с явными ограничениями, так и с автоматической очисткой в случае превышения квоты:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
Вам необходимо установить maxEntries , maxAgeSeconds или оба при использовании ExpirationPlugin . purgeOnQuotaError является необязательным.
maxEntries
Это накладывает верхний предел на количество записей (то есть уникальных URL-адресов) для данного кэша.
Установка этого параметра обычно является хорошей идеей, если только вы не знаете, что существует лишь небольшое количество возможных URL-адресов, которые могут быть обработаны данной стратегией .
maxAgeSeconds
Записи, добавленные в кеш более указанного количества секунд назад, будут считаться устаревшими и автоматически очищаться при следующем обращении к кешу.
Это не так эффективно для управления квотой хранилища, как maxEntries , поскольку ваши кэши могут вырасти до произвольного размера, если все записи были добавлены в течение небольшого периода времени. Это наиболее полезно, когда вы знаете, что существует верхний предел актуальности, который вы хотите установить, а сохранение старых записей не имеет большого значения для вашего веб-приложения.
очисткаOnQuotaError
Эта опция позволяет вам пометить данный кеш как безопасный для автоматического удаления в случае, если ваше веб-приложение превысит доступное хранилище.
В настоящее время эта опция имеет значение false . Кэши времени выполнения, как правило, должны быть устойчивыми к удалению, поэтому установка для этого параметра значения true является хорошей практикой и помогает гарантировать, что ваше веб-приложение сможет автоматически восстанавливаться в условиях ограничений хранилища.
Какой объем данных вам разрешено хранить?
Каждый браузер имеет свои ограничения на объем памяти , поэтому однозначного ответа нет. Кроме того, в некоторых браузерах есть динамический предел, который варьируется в зависимости от объема свободного места на конкретном устройстве, поэтому эффективный верхний предел может измениться без предварительного уведомления.
Некоторые браузеры предоставляют интерфейс для запроса приблизительного объема хранилища, используемого вашим источником, а также верхнего предела через navigator.storage.estimate() . В статье « Оценка доступного дискового пространства » содержится дополнительная информация о том, как вы можете использовать его в своих веб-приложениях.
Особые рекомендации по использованию Chrome в режиме инкогнито
Открытие веб-приложения в режиме инкогнито Chrome накладывает особое ограничение на хранилище, которое не распространяется на обычные контексты просмотра: существует ограничение по квоте около 100 мегабайт, независимо от свободного места, доступного на вашем устройстве.
Остерегайтесь непрозрачных ответов!
Распространенным источником неожиданно высокого использования квоты является кэширование непрозрачных ответов во время выполнения, то есть ответов из разных источников на запросы, сделанные без включения CORS.
Браузеры автоматически увеличивают квоту этих непрозрачных ответов из соображений безопасности. В Chrome, например, даже непрозрачный ответ размером в несколько килобайт в конечном итоге приведет к увеличению использования квоты примерно на 7 мегабайт .
Вы можете быстро использовать гораздо больше квоты, чем ожидали, как только начнете кэшировать непрозрачные ответы, поэтому лучше всего использовать ExpirationPlugin с maxEntries и, возможно, purgeOnQuotaError , настроенным соответствующим образом.