Tous les navigateurs imposent une limite supérieure à la quantité d'espace de stockage que l'origine de votre application Web est autorisée à utiliser. Vous pouvez configurer Workbox pour qu'il nettoie automatiquement les données qu'il met en cache au moment de l'exécution afin d'éviter de rencontrer des limites de quota de stockage qui pourraient affecter l'efficacité et la fiabilité du cache de votre site Web.
Quelles sont les options de configuration compatibles ?
Lorsque vous configurez une stratégie de routage et de mise en cache d'exécution, vous pouvez ajouter une instance de ExpirationPlugin à partir de workbox-expiration configurée avec les paramètres les plus adaptés au type d'assets que vous mettez en cache.
Par exemple, la configuration suivante peut être utilisée pour mettre en cache des images au moment de l'exécution, avec des limites explicites et un nettoyage automatique si le quota est dépassé:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
// Use a cache-first strategy with the following config:
new CacheFirst({
// You need to provide a cache name when using expiration.
cacheName: 'images',
plugins: [
new ExpirationPlugin({
// Keep at most 50 entries.
maxEntries: 50,
// Don't keep any entries for more than 30 days.
maxAgeSeconds: 30 * 24 * 60 * 60,
// Automatically cleanup if quota is exceeded.
purgeOnQuotaError: true
})
]
})
);
Vous devez définir maxEntries, maxAgeSeconds ou les deux lorsque vous utilisez ExpirationPlugin. purgeOnQuotaError est facultatif.
maxEntries
Cela impose une limite supérieure au nombre d'entrées (c'est-à-dire d'URL uniques) pour un cache donné.
Il est recommandé de définir ce paramètre, sauf si vous savez qu'il n'existe qu'un petit nombre d'URL susceptibles d'être gérées par une stratégie donnée.
maxAgeSeconds
Les entrées ajoutées au cache il y a plus de ce nombre de secondes seront considérées comme obsolètes et seront automatiquement nettoyées la prochaine fois que le cache sera consulté.
Cette méthode n'est pas aussi efficace pour gérer les quotas de stockage que maxEntries, car vos caches peuvent atteindre une taille arbitraire tant que les entrées ont toutes été ajoutées dans un court laps de temps. Il est particulièrement utile lorsque vous savez qu'il existe une limite supérieure à la fraîcheur que vous souhaitez imposer et que conserver les entrées plus anciennes n'a que peu d'intérêt pour votre application Web.
purgeOnQuotaError
Cette option vous permet de marquer un cache donné comme pouvant être supprimé automatiquement en toute sécurité si votre application Web dépasse l'espace de stockage disponible.
Cette option est actuellement définie par défaut sur false. En général, les caches d'exécution doivent être résilients en cas de suppression. Il est donc recommandé de définir cette option sur true. Cela permet de s'assurer que votre application Web peut se rétablir automatiquement en cas de contraintes de stockage.
Quelle quantité de données pouvez-vous stocker ?
Chaque navigateur a sa propre limite supérieure de stockage. Il n'existe donc pas de réponse unique. De plus, certains navigateurs ont une limite dynamique qui varie en fonction de la quantité d'espace de stockage disponible sur un appareil donné. La limite supérieure effective peut donc changer sans préavis.
Certains navigateurs exposent une interface permettant d'interroger la quantité approximative d'espace de stockage utilisée par votre origine, ainsi que la limite supérieure, via navigator.storage.estimate(). Pour en savoir plus sur l'utilisation de cette fonctionnalité dans vos propres applications Web, consultez l'article Estimer l'espace de stockage disponible.
Considérations spéciales concernant la navigation privée dans Chrome
Lorsque vous ouvrez une application Web en mode navigation privée de Chrome, le stockage est soumis à une restriction spéciale qui ne s'applique pas aux contextes de navigation normaux: la limite de quota est d'environ 100 mégaoctets, quel que soit l'espace disponible sur votre appareil.
Méfiez-vous des réponses opaques.
Une source courante d'utilisation inattendue des quotas est due au stockage en cache d'exécution des réponses opaques, c'est-à-dire des réponses inter-origines aux requêtes effectuées sans CORS activé.
Pour des raisons de sécurité, les navigateurs gonflent automatiquement l'impact de ces réponses opaques sur le quota. Dans Chrome, par exemple, même une réponse opaque de quelques kilo-octets finira par contribuer à l'utilisation de votre quota à hauteur de environ 7 mégaoctets.
Vous pouvez rapidement utiliser beaucoup plus de quota que prévu lorsque vous commencez à mettre en cache les réponses opaques. Il est donc recommandé d'utiliser ExpirationPlugin avec maxEntries, et éventuellement purgeOnQuotaError, configurés de manière appropriée.