CacheQueryOptions Chrome 54'te Geliyor

Jeff Posnick

Cache Storage API'yi bir hizmet çalışanı içinde veya doğrudan web uygulamalarından window.caches aracılığıyla kullanıyorsanız size iyi bir haberimiz var: Chrome 54'ten itibaren CacheQueryOptions işlevlerinin tamamı desteklenmektedir. Bu sayede, aradığınız önbelleğe alınmış yanıtları daha kolay bulabilirsiniz.

Hangi seçenekler mevcut?

Aşağıdaki seçenekler, CacheStorage.match() veya Cache.match() çağrılarında ayarlanabilir. Ayarlanmadığında tümünün varsayılan değeri false (veya cacheName için undefined) olur ve match() için yapılan tek bir çağrıda birden fazla seçenek kullanabilirsiniz.

ignoreSearch

Bu, eşleştirme algoritmasına URL'nin arama bölümünü (URL sorgu parametreleri olarak da bilinir) yoksaymasını söyler. Bu, örneğin analiz izleme için kullanılan ancak önbellekte bir kaynağı benzersiz şekilde tanımlama açısından önemli olmayan sorgu parametreleri içeren bir kaynak URL'niz olduğunda yararlı olabilir. Örneğin, birçok kullanıcı aşağıdaki hizmet çalışanı "tuzaklarına" düştü:

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)
    );
  }
});

Bu tür bir kod, kullanıcı doğrudan index.html adresine gittiğinde beklendiği gibi çalışır. Ancak web uygulamanız gelen bağlantıları izlemek için bir analiz sağlayıcı kullanıyorsa ve kullanıcı index.html?utm_source=some-referral adresine giderse ne olur? Varsayılan olarak, index.html?utm_source=some-referral öğesi caches.match() öğesine iletildiğinde index.html girişi döndürülmez. Ancak ignoreSearch true olarak ayarlanmışsa hangi sorgu parametrelerinin ayarlandığına bakılmaksızın beklediğiniz önbelleğe alınmış yanıtı alabilirsiniz:

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName, birden fazla önbelleğiniz olduğunda ve belirli bir önbellekte depolanan bir yanıt istediğinizde kullanışlıdır. Bu özelliği kullanmak, sorgularınızı daha verimli hale getirebilir (tarayıcının tüm önbellekleri yerine yalnızca bir önbelleği kontrol etmesi gerekir) ve birden fazla önbellekte anahtar olarak bu URL'nin bulunabileceği durumlarda belirli bir URL için belirli bir yanıt almanıza olanak tanır. Cache.match() zaten tek bir adlandırılmış önbelleğe alınmış öğe üzerinde çalıştığından cacheName yalnızca Cache.match() ile değil, CacheStorage.match() ile kullanıldığında etkilidir.

// 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 kıyaslandığında biraz daha özel bir ilgi alanıdır ancak belirli amaçlara hizmet eder.

ignoreMethod, match()'a ilk parametre olarak herhangi bir method (POST, PUT vb.) içeren bir Request nesnesi iletmenize 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ınmış yanıtlarda ayarlanan Vary üstbilgilerine bakılmaksızın yapılacağı anlamına gelir. Vary başlığını kullanan önbelleğe alınmış yanıtlarla uğraşmadığınızı biliyorsanı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 bu özellik şu anda CacheQueryOptions'ü doğal olarak destekleyen Firefox ile sınırlıdır.

Chrome 54'ten önceki sürümlerde CacheQueryOptions kullanmak isteyen geliştiriciler, Arthur Stolyar tarafından sağlanan bir polyfill kullanabilir.