Alle Browser legen eine Obergrenze für die Menge an Speicherplatz fest, die der Ursprung Ihrer Webanwendung verwenden darf. Sie können Workbox so konfigurieren, dass die im Cache gespeicherten Daten automatisch bei Laufzeit beseitigt werden, um Speicherkontingentbeschränkungen zu vermeiden, die sich auf die Cache-Effizienz und Zuverlässigkeit Ihrer Website auswirken können.
Welche Konfigurationsoptionen werden unterstützt?
Wenn Sie eine Strategie für das Routen- und Laufzeit-Caching einrichten, können Sie eine Instanz von ExpirationPlugin aus workbox-expiration hinzufügen, die mit Einstellungen konfiguriert ist, die für den Typ der zu speichernden Assets am sinnvollsten sind.
Die folgende Konfiguration kann beispielsweise zum Caching von Bildern zur Laufzeit verwendet werden, mit expliziten Limits und automatischer Bereinigung, wenn das Kontingent überschritten wird:
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
})
]
})
);
Sie müssen maxEntries, maxAgeSeconds oder beides festlegen, wenn Sie ExpirationPlugin verwenden. purgeOnQuotaError ist optional.
maxEntries
Dadurch wird die Anzahl der Einträge (d. h. eindeutiger URLs) für einen bestimmten Cache begrenzt.
In der Regel ist es sinnvoll, diese Einstellung vorzunehmen. Es sei denn, Sie wissen, dass es nur eine kleine Anzahl möglicher 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, gelten als veraltet und werden automatisch bereinigt, wenn das nächste Mal auf den Cache zugegriffen wird.
Dies ist nicht so effektiv wie maxEntries, da Ihre Caches beliebig groß werden können, solange die Einträge innerhalb kurzer Zeit hinzugefügt wurden. Diese Option ist am nützlichsten, wenn Sie wissen, dass es eine Obergrenze für die Aktualität gibt, die Sie festlegen möchten, und ältere Einträge für Ihre Webanwendung nur wenig Nutzen haben.
purgeOnQuotaError
Mit dieser Option können Sie einen bestimmten Cache als sicher zum automatischen Löschen kennzeichnen, falls die verfügbare Speicherkapazität Ihrer Webanwendung überschritten wird.
Die Standardeinstellung für diese Option ist derzeit false. Laufzeit-Caches sollten im Allgemeinen robust gegenüber dem Löschen sein. Daher ist es eine gute Praxis, diese Option auf true festzulegen. So kann Ihre Webanwendung bei Speicherengpässen automatisch wiederhergestellt werden.
Wie viele Daten dürfen Sie speichern?
Jeder Browser hat eigene Speicherlimits, auf die es keine Antwort gibt. Außerdem haben einige Browser ein dynamisches Limit, das je nach verfügbarem Speicherplatz auf einem bestimmten Gerät variiert. Das effektive Oberlimit kann sich also ohne vorherige Ankündigung ändern.
Einige Browser bieten eine Oberfläche, über die Sie über navigator.storage.estimate() den ungefähren Speicherplatz abfragen können, der von Ihrem Ursprung verwendet wird, sowie das Obergrenze. Im Artikel Verfügbaren Speicherplatz schätzen finden Sie weitere Informationen dazu, wie Sie diesen in Ihren eigenen Web-Apps verwenden können.
Besonderheiten des Chrome-Inkognitomodus
Wenn Sie eine Web-App im Inkognitomodus von Chrome öffnen, gilt eine spezielle Speicherbeschränkung, die für normale Browserkontexte nicht gilt: Es gibt ein Kontingentlimit von etwa 100 Megabyte, unabhängig vom verfügbaren freien Speicherplatz auf Ihrem Gerät.
Vorsicht bei undurchsichtigen Antworten!
Eine häufige Ursache für eine unerwartet hohe Kontingentnutzung ist das Laufzeit-Caching von undurchsichtigen Antworten, also mehrfachen Antworten auf Anfragen, die ohne aktiviertes CORS gesendet wurden.
Aus Sicherheitsgründen erhöhen Browser die Kontingentauswirkungen dieser undurchsichtigen Antworten automatisch. In Chrome trägt beispielsweise selbst eine undurchsichtige Antwort von wenigen Kilobytes etwa 7 Megabyte zur Kontingentnutzung bei.
Wenn Sie undurchsichtige Antworten im Cache speichern, können Sie schnell viel mehr Kontingent verbrauchen, als Sie erwartet haben. Daher sollten Sie ExpirationPlugin mit maxEntries und gegebenenfalls purgeOnQuotaError verwenden, die entsprechend konfiguriert sind.