Bei allen Browsern gilt eine Obergrenze für den Speicherplatz, den der Ursprung Ihrer Web-App nutzen darf. Sie können Workbox so konfigurieren, dass die im Cache gespeicherten Daten zur Laufzeit automatisch bereinigt werden. So vermeiden Sie das Überschreiten von Beschränkungen des Speicherkontingents, die die Caching-Effizienz und -Zuverlässigkeit Ihrer Website beeinträchtigen können.
Welche Konfigurationsoptionen werden unterstützt?
Beim Einrichten einer Strategie für das Caching von Routen und Laufzeiten können Sie eine Instanz von ExpirationPlugin aus workbox-expiration hinzufügen, die mit Einstellungen konfiguriert ist, die für den Typ der Assets, die Sie im Cache speichern, am sinnvollsten sind.
Die folgende Konfiguration kann beispielsweise für das Caching von Images zur Laufzeit verwendet werden, wobei sowohl explizite Limits als auch eine automatische Bereinigung bei Überschreitung des Kontingents gelten:
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
})
]
})
);
Wenn Sie ExpirationPlugin verwenden, müssen Sie maxEntries, maxAgeSeconds oder beides festlegen. purgeOnQuotaError ist optional.
maxEntries
Dadurch wird die Anzahl der Einträge (eindeutige URLs) für einen bestimmten Cache begrenzt.
Diese Einstellung ist in der Regel sinnvoll, es sei denn, Sie wissen, dass es nur wenige mögliche URLs gibt, die von einer bestimmten Strategie verarbeitet werden könnten.
maxAgeSeconds
Einträge, die dem Cache vor mehr als dieser Anzahl von Sekunden hinzugefügt wurden, werden als veraltet betrachtet und beim nächsten Zugriff auf den Cache automatisch bereinigt.
Dies ist bei der Verwaltung des Speicherkontingents nicht so effektiv wie maxEntries, da Ihre Caches beliebig groß werden können, solange alle Einträge innerhalb eines kurzen Zeitraums hinzugefügt werden. Es ist am nützlichsten, wenn Sie wissen, dass es eine Obergrenze für die Aktualität gibt, die Sie festlegen möchten, und das Einhalten älterer Einträge für Ihre Webanwendung wenig Wert hat.
purgeOnQuotaError
Mit dieser Option können Sie einen Cache als sicher löschen, falls Ihre Web-App den verfügbaren Speicherplatz überschreitet.
Die Standardeinstellung für diese Option ist false. Laufzeit-Caches sollten im Allgemeinen auch bei Löschvorgängen resistent sein. Daher empfiehlt es sich, diese Option auf true festzulegen. So wird sichergestellt, dass Ihre Webanwendung angesichts von Speicherbeschränkungen automatisch wiederhergestellt werden kann.
Wie viele Daten dürfen gespeichert werden?
Jeder Browser hat eigene Obergrenzen für den Speicherplatz, es gibt also keine Antwort auf eine Frage. Darüber hinaus gibt es bei einigen Browsern ein dynamisches Limit, das sich nach der Größe des verfügbaren Speicherplatzes auf dem jeweiligen Gerät richtet. Die effektive Obergrenze kann sich also ohne vorherige Ankündigung ändern.
Einige Browser stellen über navigator.storage.estimate() eine Schnittstelle zur Abfrage der ungefähren Speicherplatzbelegung Ihres Ursprungs sowie der Obergrenze zur Verfügung. Im Artikel Verfügbaren Speicherplatz schätzen finden Sie weitere Informationen dazu, wie Sie diesen Speicherplatz in Ihren eigenen Webanwendungen verwenden können.
Besondere Hinweise zum Inkognitomodus von Chrome
Wenn Sie eine Web-App im Inkognito-Modus von Chrome öffnen, entsteht eine spezielle Speicherbeschränkung, die für normale Browserkontexte nicht gilt: Ein Kontingentlimit von etwa 100 MB gilt unabhängig vom freien Speicherplatz auf Ihrem Gerät.
Hüten Sie sich vor undurchsichtigen Antworten!
Eine häufige Ursache für eine unerwartet hohe Kontingentnutzung ist das Laufzeit-Caching von intransparenten Antworten, d. h. ursprungsübergreifende Antworten auf Anfragen ohne aktiviertes CORS.
Browser erhöhen aus Sicherheitsgründen automatisch die Kontingentauswirkungen dieser intransparenten Antworten. In Chrome beispielsweise führt bereits eine undurchsichtige Antwort von wenigen Kilobyte zu etwa 7 Megabyte zu Ihrer Kontingentnutzung.
Sie können schnell deutlich mehr Kontingente aufbrauchen, als Sie erwartet hätten, wenn Sie mit dem Caching intransparenter Antworten beginnen. Daher empfiehlt es sich, ExpirationPlugin mit maxEntries und möglicherweise purgeOnQuotaError zu verwenden, die entsprechend konfiguriert sind.