vencimiento del cuadro de trabajo

Es bastante común querer aplicar restricciones a 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 conservar 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 las entradas que se almacenaron en caché durante un período prolongado.

Restringe la cantidad de entradas de caché

Para restringir la cantidad de entradas almacenadas en una caché, puedes usar la opción maxEntries 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({
        maxEntries: 20,
      }),
    ],
  })
);

Con esto, se agregará el complemento a esta ruta. Después de usar una respuesta almacenada en caché o de agregar una solicitud nueva a la caché, el complemento examinará la caché configurada y se asegurará de que la cantidad de entradas almacenadas en caché no supere el límite. Si es así, se quitarán las entradas más antiguas.

Restringe la antigüedad de las entradas almacenadas en caché

Para restringir durante cuánto tiempo se almacena en caché una solicitud, puedes definir una edad máxima en segundos con 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 solicitud o actualización de la caché.

Uso avanzado

Si quieres usar la lógica de vencimiento separada de cualquier otro módulo de Workbox, puedes hacerlo con la clase CacheExpiration.

Para aplicar restricciones a una caché, debes crear una instancia de CacheExpiration para la caché que deseas controlar de la siguiente manera:

import {CacheExpiration} from 'workbox-expiration';

const cacheName = 'my-cache';
const expirationManager = new CacheExpiration(cacheName, {
  maxAgeSeconds: 24 * 60 * 60,
  maxEntries: 20,
});

Cada vez que actualizas una entrada almacenada en caché, debes llamar al método updateTimestamp() para que se actualice su antigüedad.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Luego, cada vez que quieras vencer un conjunto de entradas, puedes llamar al método expireEntries(), que aplicará la configuración de 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 crear una nueva instancia 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

      string

      Es el nombre de la caché a la que se aplicarán las restricciones.

    • config

      CacheExpirationConfig opcional

  • delete

    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: 

    () => {...}

    • muestra

      Promise<void>

  • expireEntries

    void

    Vence las entradas de la caché y los criterios determinados.

    La función expireEntries se ve de la siguiente manera: 

    () => {...}

    • muestra

      Promise<void>

  • isURLExpired

    void

    Se puede usar para verificar si una URL venció o no antes de usarla.

    Esto requiere una búsqueda de 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 IndexedDB y de la caché.

    La función isURLExpired se ve de la siguiente manera: 

    (url: string) => {...}

    • url

      string

    • muestra

      Promise<boolean>

  • updateTimestamp

    void

    Actualiza la marca de tiempo de la URL determinada. Esto garantiza que, cuando se quitan entradas según la cantidad máxima, la más reciente que se usó sea precisa o que, cuando venza, la marca de tiempo esté actualizada.

    La función updateTimestamp se ve de la siguiente manera: 

    (url: string) => {...}

    • url

      string

    • muestra

      Promise<void>

ExpirationPlugin

Este complemento se puede usar en un workbox-strategy para aplicar periódicamente un límite a la antigüedad o la cantidad de solicitudes almacenadas en caché.

Solo se puede usar con instancias de workbox-strategy que tengan un conjunto de propiedades cacheName personalizado. En otras palabras, no se puede usar para vencer las entradas en la 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 buscará la caché asociada y quitará las respuestas antiguas o adicionales.

Cuando se usa maxAgeSeconds, las respuestas se pueden usar una vez después de que venza, ya que la limpieza del vencimiento no se realizará hasta después de que se use la respuesta almacenada en caché. Si la respuesta tiene un encabezado "Fecha", entonces se realiza una verificación de vencimiento ligera y la respuesta no se usará de inmediato.

Cuando se usa maxEntries, la entrada que se solicitó con menor frecuencia 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 subyacentes de caché asociadas con esta instancia de complemento llamando a caches.delete() en tu nombre.
    • Borra los metadatos de IndexedDB que se usan para hacer un seguimiento de los detalles de vencimiento de cada instancia de 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 de forma correcta y se borren las instancias de IndexedDB abiertas.

    Ten en cuenta que, si no usas el vencimiento de la caché para una caché determinada, llamar a caches.delete() y pasar el nombre de la caché debería ser suficiente. 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: 

    () => {...}

    • muestra

      Promise<void>

ExpirationPluginOptions

Propiedades

  • matchOptions

    CacheQueryOptions opcional

  • maxAgeSeconds

    número opcional

  • maxEntries

    número opcional

  • purgeOnQuotaError

    booleano opcional