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
-
retours
-
-
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) => {...}
-
config
ExpirationPluginOptions facultatif
-
retours
-
-
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