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

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

  • 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) => {...}

  • 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