Все браузеры устанавливают верхний предел на объем хранилища, который может использовать источник вашего веб-приложения. Вы можете настроить 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
})
]
})
);
При использовании ExpirationPlugin необходимо задать maxEntries, maxAgeSeconds или оба параметра. purgeOnQuotaError указывать необязательно.
maxEntries
Таким образом, для каждого кеша устанавливается верхний предел количества записей (то есть уникальных URL).
Обычно это полезно, если только вы не знаете, что стратегия может обрабатывать лишь небольшое количество URL.
maxAgeSeconds
Записи, добавленные в кеш более чем указанное количество секунд назад, будут считаться устаревшими и автоматически удалены при следующем обращении к кешу.
Этот способ управления квотой на хранение менее эффективен, чем maxEntries, поскольку размер кеша может быть произвольно большим, если все записи были добавлены за короткий период времени. Этот параметр полезен, если вы знаете, что хотите установить верхний предел актуальности, а хранение более старых записей не имеет значения для вашего веб-приложения.
purgeOnQuotaError
Этот параметр позволяет пометить кеш как безопасный для автоматического удаления, если веб-приложение превысит доступный объем хранилища.
По умолчанию для этого параметра задано значение false. Кэш времени выполнения, как правило, устойчив к удалению, поэтому рекомендуется установить для этого параметра значение true. Это поможет вашему веб-приложению автоматически восстанавливаться при нехватке места в хранилище.
Какой объем данных можно хранить?
У каждого браузера свои ограничения на объем хранилища, поэтому точный ответ дать нельзя. Кроме того, в некоторых браузерах действует динамическое ограничение, которое зависит от объема свободного места на устройстве. Поэтому эффективный верхний предел может измениться без уведомления.
Некоторые браузеры предоставляют интерфейс для запроса приблизительного объема хранилища, используемого вашим источником, а также верхнего предела с помощью navigator.storage.estimate(). В статье Как оценить доступное пространство в хранилище приведена дополнительная информация о том, как использовать эту функцию в собственных веб-приложениях.
Особенности режима инкогнито в Chrome
При открытии веб-приложения в режиме инкогнито Chrome на хранилище накладывается особое ограничение, которое не действует в обычном режиме просмотра: независимо от того, сколько свободного места доступно на устройстве, квота составляет около 100 МБ.
Остерегайтесь непрозрачных ответов!
Часто неожиданно высокое использование квоты связано с кешированием во время выполнения непрозрачных ответов, то есть ответов из разных источников на запросы, выполненные без включенной технологии CORS.
Браузеры автоматически увеличивают влияние таких непрозрачных ответов на квоту в целях безопасности. Например, в Chrome даже непрозрачный ответ размером в несколько килобайт будет учитываться как около 7 мегабайт в рамках квоты.
После того как вы начнете кешировать непрозрачные ответы, вы можете быстро израсходовать гораздо больше квоты, чем предполагали. Поэтому рекомендуется использовать ExpirationPlugin с maxEntries и, возможно, purgeOnQuotaError, настроенными соответствующим образом.