Wenn Sie die Cache Storage API entweder in einem Service Worker oder direkt über Webanwendungen über window.caches verwenden, gibt es 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. Dies kann sich als nützlich erweisen, wenn Sie eine Quell-URL mit Suchparametern haben, die beispielsweise für das Analytics-Tracking verwendet werden, aber im Hinblick auf die eindeutige Identifizierung einer Ressource im Cache nicht von Bedeutung 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 spezifischer als ignoreSearch und cacheName, dienen aber bestimmten Zwecken.
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 eine Cache-Suche ohne die Vary-Header durchgeführt wird, die in den im Cache gespeicherten Antworten festgelegt sind. Wenn Sie wissen, dass Sie es nicht mit im Cache gespeicherten Antworten zu tun haben, die den Vary-Header verwenden, müssen Sie diese Option nicht aktivieren.
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 älteren Chrome-Versionen als Chrome 54 verwenden möchten, können ein Polyfill mit freundlicher Genehmigung von Arthur Stolyar verwenden.