vencimiento del cuadro de trabajo

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();