Wenn Sie die Cache Storage API entweder in einem Service Worker oder direkt über Webanwendungen über window.caches verwenden, haben wir gute Neuigkeiten: Ab Chrome 54 wird die vollständige CacheQueryOptions unterstützt. So können Sie die gewünschten Antworten im Cache leichter finden.
Welche Optionen gibt es?
Die folgenden Optionen können bei jedem Aufruf von CacheStorage.match() oder Cache.match() festgelegt werden. Wenn sie nicht festgelegt sind, wird standardmäßig false (oder undefined für cacheName) verwendet. Sie können mehrere Optionen in einem einzigen Aufruf von match() verwenden.
ignoreSearch
Dadurch wird der Abgleichsalgorithmus angewiesen, den Such-Abschnitt einer URL zu ignorieren, auch als URL-Abfrageparameter bezeichnet. Das kann nützlich sein, wenn eine Quell-URL Abfrageparameter enthält, die beispielsweise für das Analyse-Tracking verwendet werden, aber nicht für die eindeutige Identifizierung einer Ressource im Cache relevant sind. Viele Nutzer sind beispielsweise auf die folgende Service Worker-Falle hereingefallen:
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)
);
}
});
Diese Art von Code funktioniert wie erwartet, wenn ein Nutzer direkt zu index.html gelangt. Was ist aber, wenn Ihre Webanwendung einen Analyseanbieter verwendet, um eingehende Links zu erfassen, und der Nutzer zu index.html?utm_source=some-referral gelangt? Wenn Sie index.html?utm_source=some-referral an caches.match() übergeben, wird standardmäßig kein Eintrag für index.html zurückgegeben. Wenn ignoreSearch jedoch auf true festgelegt ist, können Sie unabhängig von den festgelegten Abfrageparametern die erwartete Antwort aus dem Cache abrufen:
caches.match(event.request, {ignoreSearch: true})
cacheName
cacheName ist nützlich, wenn Sie mehrere Caches haben und eine Antwort benötigen, die in einem bestimmten Cache gespeichert ist. Dadurch können Ihre Abfragen effizienter werden, da der Browser nur einen Cache statt alle prüfen muss. Außerdem können Sie eine bestimmte Antwort für eine bestimmte URL abrufen, wenn diese URL in mehreren Caches als Schlüssel verwendet wird. cacheName hat nur Auswirkungen, wenn es mit CacheStorage.match() verwendet wird, nicht mit Cache.match(), da Cache.match() bereits auf einem einzelnen, benannten Cache basiert.
// The following are functionally equivalent:
caches.open('my-cache')
.then(cache => cache.match('index.html'));
// or...
caches.match('index.html', {cacheName: 'my-cache'});
ignoreMethod und ignoreVary
ignoreMethod und ignoreVary sind etwas spezieller als ignoreSearch und cacheName, erfüllen aber bestimmte Zwecke.
Mit ignoreMethod können Sie ein Request-Objekt übergeben, das einen beliebigen method-Wert (POST, PUT usw.) als ersten Parameter an match() übergibt. Normalerweise sind nur GET- oder HEAD-Anfragen zulässig.
// 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});
Wenn true festgelegt ist, bedeutet ignoreVary, dass Cache-Suchanfragen ohne Berücksichtigung der Vary-Header ausgeführt werden, die in den im Cache gespeicherten Antworten festgelegt sind. Wenn Sie wissen, dass es sich nicht um im Cache gespeicherte Antworten handelt, die den Vary-Header verwenden, müssen Sie diese Option nicht festlegen.
Unterstützte Browser
CacheQueryOptions ist nur in Browsern relevant, die die Cache Storage API unterstützen. Neben Chrome und Chromium-basierten Browsern ist das derzeit auf Firefox beschränkt, der CacheQueryOptions bereits nativ unterstützt.
Entwickler, die CacheQueryOptions in Chrome-Versionen vor 54 verwenden möchten, können eine Polyfill-Funktion von Arthur Stolyar verwenden.