expiration de la zone de travail

Il est assez courant de limiter la durée de stockage des éléments dans un cache ou le nombre d'éléments qui doivent l'être dans un cache. Workbox fournit cette fonctionnalité via le plug-in workbox-expiration, qui vous permet de limiter le nombre d'entrées dans un cache et / ou de supprimer les entrées mises en cache depuis une longue période.

Limiter le nombre d'entrées de cache

Pour limiter le nombre d'entrées stockées dans un cache, vous pouvez utiliser l'option maxEntries comme suit:

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,
      }),
    ],
  })
);

Ainsi, le plug-in sera ajouté à cette route. Lorsqu'une réponse mise en cache est utilisée ou qu'une nouvelle requête est ajoutée au cache, le plug-in examine le cache configuré et s'assure que le nombre d'entrées mises en cache ne dépasse pas la limite. Si c'est le cas, les entrées les plus anciennes seront supprimées.

Limiter l'âge des entrées en cache

Pour limiter la durée de mise en cache d'une requête, vous pouvez définir un âge maximal en secondes à l'aide de l'option maxAgeSeconds, comme suit:

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,
      }),
    ],
  })
);

Le plug-in vérifie et supprime les entrées après chaque mise à jour de requête ou de cache.

Utilisation avancée

Si vous souhaitez utiliser la logique d'expiration distincte de tout autre module de boîte de travail, vous pouvez le faire avec la classe CacheExpiration.

Pour appliquer des restrictions à un cache, vous devez créer une instance de CacheExpiration pour le cache que vous souhaitez contrôler, comme suit:

import {CacheExpiration} from 'workbox-expiration';

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

Chaque fois que vous mettez à jour une entrée mise en cache, vous devez appeler la méthode updateTimestamp() pour que son ancienneté soit mise à jour.

await openCache.put(request, response);

await expirationManager.updateTimestamp(request.url);

Ensuite, chaque fois que vous souhaitez faire expirer un ensemble d'entrées, vous pouvez appeler la méthode expireEntries(), qui appliquera la configuration maxAgeSeconds et maxEntries.

await expirationManager.expireEntries();

Types

CacheExpiration

La classe CacheExpiration vous permet de définir un délai d'expiration et / ou une limite du nombre de réponses stockées dans un Cache.

Propriétés

  • constructor

    void

    Pour créer une instance CacheExpiration, vous devez fournir au moins l'une des propriétés config.

    La fonction constructor se présente comme suit : 

    (cacheName: string,config?: CacheExpirationConfig)=> {...}

    • cacheName

      chaîne

      Nom du cache auquel appliquer des restrictions.

    • config

      CacheExpirationConfig facultatif

  • supprimer

    void

    Supprime le magasin d'objets IndexedDB utilisé pour suivre les métadonnées d'expiration du cache.

    La fonction delete se présente comme suit : 

    ()=> {...}

    • retours

      Promise<void>

  • expireEntries

    void

    Expire les entrées pour le cache et les critères donnés.

    La fonction expireEntries se présente comme suit : 

    ()=> {...}

    • retours

      Promise<void>

  • isURLExpired

    void

    Permet de vérifier si une URL a expiré ou non avant de l'utiliser.

    Cette opération nécessite une recherche dans IndexedDB, ce qui peut prendre du temps.

    Remarque: Cette méthode ne supprime pas l'entrée mise en cache, elle appelle expireEntries() pour supprimer les entrées indexéesDB et Cache.

    La fonction isURLExpired se présente comme suit : 

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

    • url

      chaîne

    • retours

      Promise<boolean>

  • updateTimestamp

    void

    Mettez à jour le code temporel de l'URL donnée. Ainsi, lorsque vous supprimez des entrées en fonction du nombre maximal d'entrées, la dernière utilisée est exacte ou, à l'expiration, l'horodatage est à jour.

    La fonction updateTimestamp se présente comme suit : 

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

    • url

      chaîne

    • retours

      Promise<void>

ExpirationPlugin

Ce plug-in peut être utilisé dans une workbox-strategy pour appliquer régulièrement une limite à l'âge et / ou au nombre de requêtes mises en cache.

Elle ne peut être utilisée qu'avec des instances workbox-strategy dont la propriété cacheName personnalisée est définie. En d'autres termes, il ne peut pas servir à faire expirer des entrées dans une stratégie qui utilise le nom de cache d'exécution par défaut.

Chaque fois qu'une réponse mise en cache est utilisée ou mise à jour, ce plug-in examine le cache associé et supprime toutes les réponses anciennes ou supplémentaires.

Lorsque vous utilisez maxAgeSeconds, les réponses peuvent être utilisées une fois après l'expiration, car le nettoyage de l'expiration n'a eu lieu qu'après l'utilisation de la réponse mise en cache. Si la réponse comporte un en-tête "Date", une vérification d'expiration allégée est effectuée et la réponse n'est pas utilisée immédiatement.

Lorsque vous utilisez maxEntries, l'entrée demandée le moins récemment est supprimée du cache en premier.

Propriétés

  • constructor

    void

    La fonction constructor se présente comme suit : 

    (config?: ExpirationPluginOptions)=> {...}

  • deleteCacheAndMetadata

    void

    Il s'agit d'une méthode d'assistance qui effectue deux opérations:

    • Supprime toutes les instances de cache sous-jacentes associées à cette instance de plug-in, en appelant la méthode caches.delete() en votre nom.
    • Supprime les métadonnées d'IndexedDB utilisées pour suivre les détails d'expiration de chaque instance de cache.

    Lorsque vous utilisez l'expiration du cache, il est préférable d'appeler cette méthode plutôt que d'appeler directement caches.delete(), car cela garantit que les métadonnées IndexedDB sont également supprimées proprement et que les instances IndexedDB ouvertes sont supprimées.

    Notez que si vous n'utilisez pas l'expiration du cache pour un cache donné, appeler caches.delete() et transmettre le nom du cache devrait suffire. Dans ce cas, aucune méthode spécifique à Workbox n'est nécessaire pour le nettoyage.

    La fonction deleteCacheAndMetadata se présente comme suit : 

    ()=> {...}

    • retours

      Promise<void>

ExpirationPluginOptions

Propriétés

  • matchOptions

    CacheQueryOptions facultatif

  • maxAgeSeconds

    numéro facultatif

  • maxEntries

    numéro facultatif

  • purgeOnQuotaError

    Booléen facultatif