Alle browsers stellen een bovengrens aan de hoeveelheid opslagruimte die de oorsprong van uw web-app mag gebruiken. U kunt Workbox configureren om automatisch de gegevens op te schonen die tijdens runtime in de cache worden opgeslagen, om te voorkomen dat u tegen opslagquotumbeperkingen aanloopt die van invloed kunnen zijn op de caching-efficiëntie en betrouwbaarheid van uw website.
Welke configuratieopties worden ondersteund?
Wanneer u een route- en runtime-cachingstrategie instelt, kunt u een exemplaar van ExpirationPlugin toevoegen vanuit workbox-expiration geconfigureerd met instellingen die het meest logisch zijn voor het type assets dat u in de cache opslaat.
De volgende configuratie kan bijvoorbeeld worden gebruikt voor het cachen van afbeeldingen tijdens runtime, met zowel expliciete limieten als automatisch opruimen 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
})
]
})
);
U moet maxEntries , maxAgeSeconds of beide instellen wanneer u ExpirationPlugin gebruikt. purgeOnQuotaError is optioneel.
maxInvoer
Dit legt een bovengrens op aan het aantal vermeldingen (dat wil zeggen unieke URL's) voor een bepaalde cache.
Dit instellen is normaal gesproken een goed idee, tenzij u weet dat er slechts een klein aantal mogelijke URL's zijn die ooit door een bepaalde strategie kunnen worden afgehandeld.
maxAgeSeconden
Items die meer dan dit aantal seconden geleden aan de cache zijn toegevoegd, worden als verouderd beschouwd en worden automatisch opgeschoond de volgende keer dat de cache wordt geopend.
Dit is niet zo effectief bij het beheren van opslagquota als maxEntries , omdat uw caches willekeurig groot kunnen worden, zolang de vermeldingen allemaal binnen een korte tijd worden toegevoegd. Het is vooral handig als u weet dat er een bovengrens is aan de versheid die u wilt opleggen, en het bewaren van oudere vermeldingen weinig waarde heeft voor uw webapp.
purgeOnQuotaError
Met deze optie kunt u een bepaalde cache markeren als veilig en automatisch verwijderen als uw webapp de beschikbare opslagruimte overschrijdt.
Deze optie is momenteel standaard ingesteld op false . Runtime-caches moeten over het algemeen veerkrachtig zijn bij verwijdering. Het is dus een goede gewoonte om deze optie op true in te stellen en ervoor te zorgen dat uw web-app automatisch kan herstellen als er sprake is van opslagbeperkingen.
Hoeveel gegevens mag u opslaan?
Elke browser heeft zijn eigen bovenlimieten voor opslag , dus er is geen eenduidig antwoord. Bovendien hebben sommige browsers een dynamische limiet die varieert op basis van de hoeveelheid opslagruimte die vrij is op een bepaald apparaat, dus de effectieve bovenlimiet kan zonder voorafgaande kennisgeving worden gewijzigd.
Sommige browsers bieden een interface voor het opvragen van de geschatte hoeveelheid opslagruimte die uw oorsprong gebruikt, samen met de bovengrens, via navigator.storage.estimate() . Het artikel ' Beschikbare opslagruimte schatten ' bevat meer informatie over hoe u die kunt gebruiken in uw eigen webapps.
Speciale Chrome Incognito-overwegingen
Het openen van een webapp in de incognitomodus van Chrome legt een speciale opslagbeperking op die niet van toepassing is op normale browsercontexten: er is een quotumlimiet van ongeveer 100 megabytes, ongeacht de beschikbare vrije ruimte op uw apparaat.
Pas op voor ondoorzichtige reacties!
Een veel voorkomende bron van onverwacht hoog quotumgebruik is te wijten aan het runtime-caching van ondoorzichtige reacties , dat wil zeggen cross-origine reacties op verzoeken die zijn gedaan zonder dat CORS is ingeschakeld.
Browsers vergroten automatisch de quota-impact van deze ondoorzichtige reacties als veiligheidsoverweging. In Chrome zal bijvoorbeeld zelfs een ondoorzichtige reactie van een paar kilobytes uiteindelijk ongeveer 7 megabytes bijdragen aan uw quotumgebruik.
U kunt snel veel meer quota opgebruiken dan u zou verwachten zodra u begint met het cachen van ondoorzichtige reacties, dus de beste praktijk is om ExpirationPlugin te gebruiken met maxEntries , en mogelijk purgeOnQuotaError , op de juiste manier geconfigureerd.