Als u de Cache Storage API gebruikt, hetzij binnen een servicemedewerker, hetzij rechtstreeks vanuit web-apps via window.caches , is er goed nieuws: vanaf Chrome 54 wordt de volledige set CacheQueryOptions ondersteund, waardoor het gemakkelijker wordt om de in de cache opgeslagen antwoorden te vinden. ben op zoek naar.
Welke opties zijn beschikbaar?
De volgende opties kunnen worden ingesteld bij elke aanroep van CacheStorage.match() of Cache.match() . Als ze niet zijn ingesteld, zijn ze allemaal standaard false (of undefined voor cacheName ), en u kunt meerdere opties gebruiken in één enkele aanroep van match() .
ignoreSearch
Dit instrueert het matching-algoritme om het zoekgedeelte van een URL, ook wel de URL-queryparameters genoemd, te negeren. Dit kan van pas komen als u een bron-URL heeft die queryparameters bevat die bijvoorbeeld worden gebruikt voor het bijhouden van analyses, maar die niet van belang zijn voor het uniek identificeren van een bron in de cache. Veel mensen zijn bijvoorbeeld ten prooi gevallen aan de volgende 'gotcha' van servicemedewerkers:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache')
.then(cache => cache.add('index.html'))
);
});
self.addEventListener('fetch', event => {
// Make sure this is a navigation request before responding.
if (event.request.mode === 'navigation') {
event.respondWith(
caches.match(event.request) || fetch(event.request)
);
}
});
Dit soort code werkt zoals verwacht wanneer een gebruiker rechtstreeks naar index.html navigeert, maar wat als uw webapp een analyseprovider gebruikt om inkomende links bij te houden, en de gebruiker naar index.html?utm_source=some-referral navigeert? Standaard zal het doorgeven van index.html?utm_source=some-referral aan caches.match() de vermelding voor index.html niet retourneren. Maar als ignoreSearch is ingesteld op true , kunt u het in de cache opgeslagen antwoord ophalen dat u zou verwachten, ongeacht welke queryparameters zijn ingesteld:
caches.match(event.request, {ignoreSearch: true})
cacheName
cacheName is handig als u meerdere caches heeft en u een antwoord wilt dat in één specifieke cache is opgeslagen. Het gebruik ervan kan uw zoekopdrachten efficiënter maken (aangezien de browser slechts in één cache hoeft te controleren, in plaats van in alle caches) en stelt u in staat een specifiek antwoord voor een bepaalde URL op te halen wanneer meerdere caches die URL mogelijk als sleutel hebben. cacheName heeft alleen effect bij gebruik met CacheStorage.match() , en niet Cache.match() , omdat Cache.match() al werkt op een enkele, genaamd cached.
// The following are functionally equivalent:
caches.open('my-cache')
.then(cache => cache.match('index.html'));
// or...
caches.match('index.html', {cacheName: 'my-cache'});
ignoreMethod en ignoreVary
ignoreMethod en ignoreVary zijn iets meer niche dan ignoreSearch en cacheName , maar ze dienen specifieke doeleinden.
ignoreMethod kunt u een Request object doorgeven dat een willekeurige method ( POST , PUT , etc.) heeft als de eerste parameter die moet match() . Normaal gesproken zijn alleen GET of HEAD verzoeken toegestaan.
// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});
// This will never match anything.
caches.match(postRequest);
// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});
Indien ingesteld op true , betekent ignoreVary dat zoekopdrachten in de cache worden uitgevoerd zonder rekening te houden met eventuele Vary headers die zijn ingesteld in de in de cache opgeslagen antwoorden. Als u weet dat u niet te maken heeft met in de cache opgeslagen antwoorden die de Vary-header gebruiken, hoeft u zich geen zorgen te maken over het instellen van deze optie.
Browser-ondersteuning
CacheQueryOptions is alleen relevant in browsers die de Cache Storage API ondersteunen. Naast Chrome- en Chromium-gebaseerde browsers is dat momenteel beperkt tot Firefox, dat al native ondersteuning biedt voor CacheQueryOptions .
Ontwikkelaars die CacheQueryOptions willen gebruiken in versies van Chrome ouder dan 54 kunnen gebruik maken van een polyfill , met dank aan Arthur Stolyar .