Todos los navegadores imponen un límite superior a la cantidad de almacenamiento que puede usar el origen de tu app web. Puedes configurar Workbox para que borre automáticamente los datos que almacena en caché durante el tiempo de ejecución para evitar limitaciones de cuota de almacenamiento que puedan afectar la eficiencia y la confiabilidad del almacenamiento en caché de tu sitio web.
¿Qué opciones de configuración se admiten?
Cuando configures una ruta y una estrategia de almacenamiento en caché del entorno de ejecución, puedes agregar una instancia de ExpirationPlugin desde workbox-expiration configurada con la configuración que tenga más sentido para el tipo de recursos que almacenas en caché.
Por ejemplo, se puede usar la siguiente configuración para almacenar en caché imágenes durante el tiempo de ejecución, con límites explícitos y limpieza automática si se supera la cuota:
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
})
]
})
);
Debes configurar maxEntries, maxAgeSeconds o ambos cuando uses ExpirationPlugin. purgeOnQuotaError es opcional.
maxEntries
Esto impone un límite superior al número de entradas (es decir, URLs únicas) para una caché determinada.
Por lo general, es una buena idea establecer esta opción, a menos que sepas que solo hay una pequeña cantidad de URLs posibles que una estrategia determinada podría controlar.
maxAgeSeconds
Las entradas que se agregaron a la caché hace más de esta cantidad de segundos se considerarán inactivas y se limpiarán automáticamente la próxima vez que se acceda a la caché.
Esto no es tan eficaz para administrar la cuota de almacenamiento como maxEntries, ya que tus cachés pueden crecer de forma arbitraria, siempre y cuando todas las entradas se hayan agregado en un período breve. Es más útil cuando sabes que hay un límite superior en la actualización que deseas imponer y mantener las entradas más antiguas tiene poco valor para tu app web.
purgeOnQuotaError
Esta opción te permite marcar una caché determinada como segura para eliminarla automáticamente en caso de que tu app web supere el almacenamiento disponible.
Actualmente, esta opción se establece en false de forma predeterminada. En general, las cachés de tiempo de ejecución deben ser resilientes ante la eliminación, por lo que es una práctica recomendada establecer esta opción en true y ayuda a garantizar que tu app web pueda recuperarse automáticamente ante restricciones de almacenamiento.
¿Cuántos datos puedes almacenar?
Cada navegador tiene sus propios límites superiores de almacenamiento, por lo que no hay una sola respuesta. Además, algunos navegadores tienen un límite dinámico que varía según la cantidad de almacenamiento gratuito en un dispositivo determinado, por lo que el límite superior efectivo puede cambiar sin previo aviso.
Algunos navegadores exponen una interfaz para consultar la cantidad aproximada de almacenamiento que usa tu origen, junto con el límite superior, a través de navigator.storage.estimate(). En el artículo "Cómo estimar el espacio de almacenamiento disponible", encontrarás más información sobre cómo utilizarlo en tus propias aplicaciones web.
Consideraciones especiales del modo Incógnito de Chrome
Abrir una app web en el modo Incógnito de Chrome impone una restricción especial en el almacenamiento que no se aplica a los contextos de navegación normales: hay un límite de cuota de alrededor de 100 megabytes, independientemente del espacio libre disponible en tu dispositivo.
¡Ten cuidado con las respuestas opacas!
Una fuente común de uso inesperadamente alto de la cuota es el almacenamiento en caché del tiempo de ejecución de las respuestas opacas, es decir, las respuestas de origen cruzado a solicitudes realizadas sin CORS habilitado.
Los navegadores aumentan automáticamente el impacto de la cuota de esas respuestas opacas como una consideración de seguridad. En Chrome, por ejemplo, incluso una respuesta opaca de unos pocos kilobytes terminará contribuyendo con alrededor de 7 megabytes al uso de tu cuota.
Puedes agotar rápidamente mucha más cuota de la que anticiparías una vez que comiences a almacenar en caché respuestas opacas, por lo que la práctica recomendada es usar ExpirationPlugin con maxEntries y, posiblemente, purgeOnQuotaError, configurados de forma adecuada.