CacheQueryOptions Chrome 54'te Geliyor

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.