Alle browsers hebben een bovengrens voor de hoeveelheid opslag die de oorsprong van je web-app mag gebruiken. Je kunt Workbox zo configureren dat de gegevens die tijdens runtime in de cache worden opgeslagen, automatisch worden opgeschoond. Zo voorkom je dat je de limieten voor opslagquota overschrijdt, wat van invloed kan zijn op de efficiëntie en betrouwbaarheid van de cache van je website.
Welke configuratieopties worden ondersteund?
Als je een route- en runtime-cachingstrategie instelt, kun je een instantie van ExpirationPlugin toevoegen vanuit workbox-expiration die is ingesteld met instellingen die het meest logisch zijn voor het type items dat je in de cache opslaat.
De volgende configuratie kan bijvoorbeeld worden gebruikt om afbeeldingen tijdens runtime in het cachegeheugen op te slaan, met zowel expliciete limieten als automatische opschoning als het quotum wordt overschreden:
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
})
]
})
);
Je moet maxEntries, maxAgeSeconds of beide instellen als je ExpirationPlugin gebruikt. purgeOnQuotaError is optioneel.
maxEntries
Dit legt een bovengrens op aan het aantal items (dat wil zeggen unieke URL's) voor een bepaalde cache.
Het is meestal een goed idee om dit in te stellen, tenzij je weet dat er maar een klein aantal mogelijke URL's is die ooit door een bepaalde strategie kunnen worden verwerkt.
maxAgeSeconds
Items die langer dan dit aantal seconden geleden aan het cachegeheugen zijn toegevoegd, worden als verouderd beschouwd en automatisch opgeschoond de volgende keer dat het cachegeheugen wordt geopend.
Dit is niet zo effectief voor het beheren van het opslagquotum als maxEntries, omdat je caches willekeurig groot kunnen worden zolang de items allemaal binnen een korte periode zijn toegevoegd. Dit is het handigst als je weet dat er een bovengrens is voor de versheid die je wilt opleggen en als oudere items weinig waarde hebben voor je web-app.
purgeOnQuotaError
Met deze optie kun je een bepaald cachegeheugen markeren als veilig om automatisch te verwijderen als je web-app de beschikbare opslag overschrijdt.
Deze optie is op dit moment standaard ingesteld op false. Runtime-caches moeten over het algemeen bestand zijn tegen verwijdering. Daarom is het een best practice om deze optie in te stellen op true. Zo zorg je dat je web-app automatisch kan worden hersteld als er opslagbeperkingen zijn.
Hoeveel gegevens mag je opslaan?
Elke browser heeft eigen bovengrenzen voor opslag, dus er is geen eenduidig antwoord. Sommige browsers hebben een dynamische limiet die varieert op basis van de hoeveelheid vrije opslag op een bepaald apparaat. De effectieve bovengrens kan dus zonder kennisgeving worden gewijzigd.
Sommige browsers bieden een interface om de geschatte hoeveelheid opslag die je oorsprong gebruikt, samen met de bovengrens, op te vragen via navigator.storage.estimate(). In het artikel Beschikbare opslagruimte schatten vind je meer informatie over hoe je dit kunt gebruiken in je eigen web-apps.
Speciale overwegingen voor Chrome-incognitomodus
Als je een web-app opent in de incognitomodus van Chrome, geldt er een speciale opslagbeperking die niet van toepassing is op normale browsecontexten: er is een quotumlimiet van ongeveer 100 megabyte, ongeacht de beschikbare vrije ruimte op je apparaat.
Pas op voor onduidelijke reacties.
Een veelvoorkomende oorzaak van onverwacht hoog quotagebruik is runtime caching van ondoorzichtige reacties, oftewel cross-origin reacties op verzoeken waarvoor CORS niet aanstaat.
Browsers verhogen automatisch de impact van deze ondoorzichtige reacties op het quotum als beveiligingsmaatregel. In Chrome draagt zelfs een ondoorzichtige reactie van een paar kilobytes ongeveer 7 megabytes bij aan je quotumgebruik.
Als je ondoorzichtige reacties in de cache opslaat, kun je snel veel meer quotum gebruiken dan je verwacht. Daarom is het best practice om ExpirationPlugin met maxEntries en eventueel purgeOnQuotaError op de juiste manier te configureren.