Es bastante común querer establecer restricciones en una caché en términos de cuánto tiempo debería permitir que los elementos se almacenen en una caché o cuántos elementos se deben guardar en una caché. Workbox proporciona esta funcionalidad a través del complemento workbox-expiration
, que te permite limitar la cantidad de entradas en una caché o quitar entradas que se almacenaron en caché durante un período prolongado.
Restringir el número de entradas en la caché
Para restringir la cantidad de entradas almacenadas en una caché, puedes usar la opción maxEntries
de esta manera:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
maxEntries: 20,
}),
],
})
);
Con esto, el complemento se agregará a esta ruta. Después de usar una respuesta almacenada en caché o de agregar una solicitud nueva a la caché, el complemento analizará la caché configurada y se asegurará de que la cantidad de entradas almacenadas en caché no supere el límite. Si lo hace, se quitarán las entradas más antiguas.
Restringe la antigüedad de las entradas almacenadas en caché
Para restringir el tiempo que una solicitud se almacena en caché, puedes definir una antigüedad máxima en segundos mediante la opción maxAgeSeconds
de la siguiente manera:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
maxAgeSeconds: 24 * 60 * 60,
}),
],
})
);
El complemento verificará y quitará las entradas después de cada actualización de solicitud o caché.
Uso avanzado
Si quieres usar la lógica de vencimiento de forma independiente de cualquier otro módulo de Workbox, puedes hacerlo con la clase CacheExpiration
.
Con el fin de aplicar restricciones a una caché, debes crear una instancia de CacheExpiration
para la caché que quieres controlar de esta manera:
import {CacheExpiration} from 'workbox-expiration';
const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
maxAgeSeconds: 24 * 60 * 60,
maxEntries: 20,
});
Cada vez que actualices una entrada almacenada en caché, deberás llamar al método updateTimestamp()
para que se actualice su antigüedad.
await openCache.put(request, response);
await expirationManager.updateTimestamp(request.url);
Luego, cuando quieras que venza un conjunto de entradas, puedes llamar al método expireEntries()
, que aplicará de manera forzosa la configuración maxAgeSeconds
y maxEntries
.
await expirationManager.expireEntries();
Tipos
CacheExpiration
La clase CacheExpiration
te permite definir un vencimiento o un límite para la cantidad de respuestas almacenadas en un Cache
.
Propiedades
-
constructor
void
Para construir una instancia nueva de CacheExpiration, debes proporcionar al menos una de las propiedades
config
.La función
constructor
se ve de la siguiente manera:(cacheName: string, config?: CacheExpirationConfig) => {...}
-
cacheName
cadena
Nombre de la caché a la que se aplicarán restricciones.
-
config
CacheExpirationConfig opcional
-
resultados
-
-
borrar
void
Quita el almacén de objetos IndexedDB que se usa para hacer un seguimiento de los metadatos de vencimiento de la caché.
La función
delete
se ve de la siguiente manera:() => {...}
-
resultados
Promise<void>
-
-
expireEntries
void
Expira las entradas para la caché determinada y los criterios especificados.
La función
expireEntries
se ve de la siguiente manera:() => {...}
-
resultados
Promise<void>
-
-
isURLExpired
void
Se puede utilizar para verificar si una URL venció o no antes de usarla.
Esto requiere una consulta desde IndexedDB, por lo que puede ser lento.
Nota: Este método no quitará la entrada almacenada en caché. Llama a
expireEntries()
para quitar las entradas de indexadas y caché.La función
isURLExpired
se ve de la siguiente manera:(url: string) => {...}
-
url
cadena
-
resultados
Promise<boolean>
-
-
updateTimestamp
void
Actualiza la marca de tiempo de la URL dada. Esto garantiza que el momento en que se quitan las entradas según las entradas máximas, que se usaron más recientemente, sea preciso o, cuando venza, la marca de tiempo esté actualizada.
La función
updateTimestamp
se ve de la siguiente manera:(url: string) => {...}
-
url
cadena
-
resultados
Promise<void>
-
ExpirationPlugin
Este complemento se puede usar en un workbox-strategy
para aplicar de manera regular un límite a la antigüedad o a la cantidad de solicitudes almacenadas en caché.
Solo se puede usar con instancias de workbox-strategy
que tengan un
conjunto de propiedades cacheName
personalizadas.
En otras palabras, no se puede usar para que venzan las entradas en una estrategia que usa el nombre de caché del entorno de ejecución predeterminado.
Cada vez que se use o actualice una respuesta almacenada en caché, este complemento analizará la caché asociada y quitará las respuestas anteriores o adicionales.
Cuando se usa maxAgeSeconds
, las respuestas se pueden usar una vez después del vencimiento, ya que la limpieza de vencimiento no se habrá producido hasta después de que se haya usado la respuesta almacenada en caché. Si la respuesta tiene un encabezado "Fecha", se realiza una verificación de vencimiento ligera y la respuesta no se usará de inmediato.
Cuando se usa maxEntries
, la entrada solicitada recientemente se quitará primero de la caché.
Propiedades
-
constructor
void
La función
constructor
se ve de la siguiente manera:(config?: ExpirationPluginOptions) => {...}
-
config
ExpirationPluginOptions opcional
-
resultados
-
-
deleteCacheAndMetadata
void
Este es un método auxiliar que realiza dos operaciones:
- Borra todas las instancias de caché subyacentes asociadas con esta instancia del complemento llamando a caches.delete() en tu nombre.
- Borra los metadatos de IndexedDB que se usan para realizar un seguimiento de los detalles de vencimiento de cada instancia de la caché.
Cuando se usa el vencimiento de la caché, es preferible llamar a este método en lugar de llamar directamente a
caches.delete()
, ya que esto garantizará que los metadatos de IndexedDB también se quiten sin problemas y se borren las instancias de IndexedDB abiertas.Ten en cuenta que, si no usas el vencimiento de la caché para una caché determinada, basta con llamar a
caches.delete()
y pasar el nombre de la caché. En ese caso, no se necesita un método específico de Workbox para la limpieza.La función
deleteCacheAndMetadata
se ve de la siguiente manera:() => {...}
-
resultados
Promise<void>
ExpirationPluginOptions
Propiedades
-
matchOptions
CacheQueryOptions opcional
-
maxAgeSeconds
número opcional
-
maxEntries
número opcional
-
purgeOnQuotaError
booleano opcional