expiration de la zone de travail

Il est assez courant de vouloir imposer des restrictions à un cache en termes de durée pendant laquelle il doit autoriser le stockage d'éléments dans un cache ou du nombre d'éléments à conserver 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 qui ont été mises en cache pendant 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,
      }),
    ],
  })
);

Le plug-in sera alors ajouté à ce parcours. Une fois qu'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 mises en cache

Pour limiter la durée de mise en cache d'une requête, vous pouvez définir une durée maximale 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 requête ou mise à jour du cache.

Utilisation avancée

Si vous souhaitez utiliser la logique d'expiration indépendamment de tout autre module Workbox, 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 âge soit mis à 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 une expiration et / ou une limite sur le nombre de réponses stockées dans un Cache.

Propriétés

  • constructor

    vide

    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

    vide

    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

    vide

    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

    vide

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

    Cette opération nécessite une recherche dans IndexedDB, ce qui peut être lent.

    Remarque: Cette méthode ne supprime pas l'entrée mise en cache. Appelez expireEntries() pour supprimer les entrées indexedDB et Cache.

    La fonction isURLExpired se présente comme suit : 

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

    • url

      chaîne

    • retours

      Promise<boolean>

  • updateTimestamp

    vide

    Mettez à jour le code temporel de l'URL donnée. Cela garantit que lorsque vous supprimez des entrées en fonction du nombre maximal d'entrées, la dernière utilisation est exacte ou que, lors de l'expiration, le code temporel 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 un workbox-strategy pour appliquer régulièrement une limite à l'âge et / ou au nombre de requêtes mises en cache.

Il ne peut être utilisé qu'avec des instances workbox-strategy qui disposent d'un ensemble de propriétés cacheName personnalisé. En d'autres termes, il ne peut pas être utilisé pour faire expirer les entrées d'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 les réponses anciennes ou supplémentaires.

Lorsque vous utilisez maxAgeSeconds, les réponses peuvent être utilisées une fois après leur expiration, car le nettoyage d'expiration n'aura 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 légère est effectuée et la réponse n'est pas utilisée immédiatement.

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

Propriétés

  • constructor

    vide

    La fonction constructor se présente comme suit : 

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

  • deleteCacheAndMetadata

    vide

    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 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 de manière propre 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 requise pour le nettoyage.

    La fonction deleteCacheAndMetadata se présente comme suit : 

    () => {...}

    • retours

      Promise<void>

ExpirationPluginOptions

Propriétés

  • matchOptions

    CacheQueryOptions facultatif

  • maxAgeSeconds

    number facultatif

  • maxEntries

    number facultatif

  • purgeOnQuotaError

    booléen facultatif