Todos los navegadores imponen un límite superior a la cantidad de almacenamiento que puede usar el origen de tu aplicación web. Puedes configurar Workbox para que limpie automáticamente los datos que almacena en caché en el entorno de ejecución a fin de evitar las limitaciones de la cuota de almacenamiento que podrían afectar la eficiencia y confiabilidad del almacenamiento en caché de tu sitio web.
¿Qué opciones de configuración son compatibles?
Cuando configuras una estrategia de almacenamiento en caché de la ruta y el entorno de ejecución, puedes agregar una instancia de ExpirationPlugin de workbox-expiration configurada con la configuración más adecuada para el tipo de elementos que almacenas en caché.
Por ejemplo, se podría usar la siguiente configuración para almacenar en caché imágenes durante el tiempo de ejecución, con límites explícitos y una limpieza automática si se excede 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 en la cantidad de entradas (es decir, URLs únicas) para una caché determinada.
Por lo general, configurar esta opción es una buena idea, 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é.
Este método no es tan eficaz para administrar la cuota de almacenamiento como maxEntries, ya que el tamaño de las cachés puede aumentar de manera arbitraria siempre que todas las entradas se agreguen en un período breve. Resulta más útil cuando sabes que hay un límite máximo de actualidad que quieres imponer y que evitar las entradas más antiguas tiene poco valor para la app web.
purgeOnQuotaError
Esta opción te permite marcar que una caché determinada es segura para borrarse automáticamente en caso de que tu app web exceda el almacenamiento disponible.
Actualmente, esta opción se establece en false de forma predeterminada. En general, las memorias caché del entorno de ejecución deben ser resilientes ante la eliminación, por lo que configurar esta opción en true es una práctica recomendada 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 de almacenamiento máximos, 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 disponible 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, mediante navigator.storage.estimate(). En el artículo "Cómo estimar el espacio de almacenamiento disponible", encontrarás más información sobre cómo puedes usarlo en tus propias aplicaciones web.
Consideraciones especiales del modo Incógnito de Chrome
Abrir una aplicación web en el modo Incógnito de Chrome impone una restricción especial de almacenamiento que no se aplica a los contextos de navegación normales: hay un límite de cuota de aproximadamente 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é de las respuestas opacas en el tiempo de ejecución, es decir, las respuestas de origen cruzado a las solicitudes realizadas sin CORS habilitado.
Como consideración de seguridad, los navegadores aumentan automáticamente el impacto de la cuota de esas respuestas opacas. En Chrome, por ejemplo, incluso una respuesta opaca de algunos kilobytes equivale a alrededor de 7 megabytes en tu consumo de cuota.
Puedes usar mucho más cuota de lo que esperabas 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, configurado de forma correcta.