Wenn Sie die Cache Storage API entweder in einem Service Worker oder direkt in Webanwendungen über window.caches verwenden, gibt es gute Nachrichten: Ab Chrome 54 wird der gesamte Satz CacheQueryOptions unterstützt, sodass Sie die gesuchten im Cache gespeicherten Antworten leichter finden.
Welche Optionen sind verfügbar?
Die folgenden Optionen können in jedem Aufruf von CacheStorage.match() oder Cache.match() festgelegt werden. Wenn nichts festgelegt ist, werden alle standardmäßig auf false (oder undefined für cacheName) gesetzt. Sie können mehrere Optionen in einem einzigen Aufruf von match() verwenden.
ignoreSearch
Dadurch wird der Abgleichsalgorithmus angewiesen, den Suchteil einer URL zu ignorieren, der auch als URL-Suchparameter bezeichnet wird. Dies kann sich als nützlich erweisen, wenn Sie eine Quell-URL mit Suchparametern haben, die beispielsweise für das Analyse-Tracking verwendet werden, aber für die eindeutige Identifizierung einer Ressource im Cache nicht wichtig sind. Zum Beispiel sind viele Leute der folgenden Servicekraft zum Opfer gefallen:
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 navigiert. Aber was ist, wenn Ihre Web-App einen Analyseanbieter verwendet, um eingehende Links zu erfassen, und der Nutzer zu index.html?utm_source=some-referral navigiert? Standardmäßig wird bei der Übergabe von index.html?utm_source=some-referral an caches.match() der Eintrag für index.html nicht zurückgegeben. Wenn ignoreSearch jedoch auf true gesetzt ist, können Sie die erwartete im Cache gespeicherte Antwort abrufen, unabhängig davon, welche Abfrageparameter festgelegt sind:
caches.match(event.request, {ignoreSearch: true})
cacheName
cacheName ist praktisch, wenn Sie mehrere Caches haben und eine Antwort wünschen, die in einem bestimmten Cache gespeichert wird. Wenn Sie diese Methode verwenden, werden Ihre Abfragen effizienter, da der Browser nur einen Cache statt in allen Caches prüfen muss. Außerdem können Sie eine bestimmte Antwort für eine bestimmte URL abrufen, wenn mehrere Caches diese URL als Schlüssel verwenden könnten. cacheName wirkt sich nur bei Verwendung mit CacheStorage.match() und nicht bei Cache.match() aus, da Cache.match() bereits mit einem einzelnen benannten Cache arbeitet.
// 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 Nischenpublikum als ignoreSearch und cacheName, dienen aber einem bestimmten Zweck.
Mit ignoreMethod können Sie ein Request-Objekt übergeben, das eine beliebige method (POST, PUT usw.) als ersten Parameter an match() hat. 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-Suchen ohne Berücksichtigung der Vary-Header durchgeführt werden, die in den im Cache gespeicherten Antworten festgelegt sind. Wenn Sie wissen, dass Sie keine im Cache gespeicherten Antworten haben, 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 dies derzeit auf Firefox beschränkt, das CacheQueryOptions bereits nativ unterstützt.
Entwickler, die CacheQueryOptions in älteren Chrome-Versionen als 54 nutzen möchten, können mit freundlicher Genehmigung von Arthur Stolyar einen Polyfill nutzen.