Cache Storage API'yi bir hizmet çalışanının içinden veya doğrudan window.caches
aracılığıyla web uygulamalarından kullanıyorsanız size iyi bir haberimiz var: Chrome 54'ten itibaren, CacheQueryOptions
kümesinin tamamı desteklenir ve aradığınız önbelleğe alınmış yanıtları bulmanız daha kolay hale gelir.
Hangi seçenekler mevcut?
Aşağıdaki seçenekler, herhangi bir CacheStorage.match()
veya Cache.match()
çağrısında ayarlanabilir. Ayarlanmadığında bunların tümü varsayılan olarak false
(veya cacheName
için undefined
) olur ve match()
numaralı telefona tek bir çağrıda birden fazla seçenek kullanabilirsiniz.
ignoreSearch
Bu işlem, eşleştirme algoritmasına URL sorgu parametreleri olarak da bilinen arama bölümünü yoksaymasını bildirir. Bu, analiz izleme için kullanılan sorgu parametreleri içeren ancak önbellekteki bir kaynağı benzersiz şekilde tanımlama açısından önemli olmayan bir kaynak URL'niz olduğunda kullanışlı olabilir. Örneğin, birçok kişi şu hizmet çalışanının ("gotcha") tuzağına düşmüştür:
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)
);
}
});
Bir kullanıcı doğrudan index.html
sayfasına gittiğinde bu tür bir kod beklendiği gibi çalışır, ancak web uygulamanız gelen bağlantıları izlemek için bir analiz sağlayıcısı kullanıyorsa ve kullanıcı index.html?utm_source=some-referral
sayfasına giderse ne olur? Varsayılan olarak, index.html?utm_source=some-referral
öğesi caches.match()
öğesine iletilirse index.html
girişi döndürülmez. Ancak ignoreSearch
, true
olarak ayarlanırsa hangi sorgu parametrelerinin ayarlanmasından bağımsız olarak bekleyeceğiniz önbelleğe alınmış yanıtı alabilirsiniz:
caches.match(event.request, {ignoreSearch: true})
cacheName
Birden fazla önbelleğiniz varsa ve belirli bir önbellekte depolanan bir yanıt istiyorsanız cacheName
kullanışlı bir seçenektir. Bunu kullanmak sorgularınızı daha verimli hale getirebilir (çünkü tarayıcının tüm önbellekler yerine yalnızca bir önbelleğin içinde kontrol etmesi gerekir) ve birden fazla önbellekte anahtar olarak söz konusu URL bulunuyorsa belirli bir URL için belirli bir yanıt almanıza olanak tanır. Cache.match()
zaten önbelleğe alınmış tek bir öğe üzerinde çalıştığından cacheName
, yalnızca CacheStorage.match()
ile kullanıldığında Cache.match()
ile birlikte kullanıldığında bir etki yaratır.
// The following are functionally equivalent:
caches.open('my-cache')
.then(cache => cache.match('index.html'));
// or...
caches.match('index.html', {cacheName: 'my-cache'});
ignoreMethod
ve ignoreVary
ignoreMethod
ve ignoreVary
, ignoreSearch
ve cacheName
ile karşılaştırıldığında daha özel ilgi alanlarına sahiptir ancak belirli amaçlara hizmet eder.
ignoreMethod
, ilk parametresi olarak herhangi bir method
(POST
, PUT
vb.) olan bir Request
nesnesini match()
öğesine geçirmenize olanak tanır. Normalde yalnızca GET
veya HEAD
isteklerine izin verilir.
// 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});
true
olarak ayarlanırsa ignoreVary
, önbellek aramalarının önbelleğe alınan yanıtlarda ayarlanan Vary
üstbilgilerine bakılmaksızın olacağı anlamına gelir. Vary üst bilgisini kullanan önbelleğe alınmış yanıtlarla ilgilenmiyorsanız, bu seçeneği ayarlama konusunda endişelenmenize gerek yoktur.
Tarayıcı desteği
CacheQueryOptions
yalnızca Cache Storage API'yi destekleyen tarayıcılarla alakalıdır. Chrome ve Chromium tabanlı tarayıcıların yanı sıra, yerel olarak CacheQueryOptions
destekleyen Firefox şu an için sınırlıdır.
Chrome'un 54'ten önceki sürümlerinde CacheQueryOptions
kullanmak isteyen geliştiriciler Arthur Stolyar'ın izniyle polyfill kullanabilirler.