CacheQueryOptions w Chrome 54

Jeff Posnick

Jeśli używasz Cache Storage API w skrypcie service worker lub bezpośrednio z aplikacji internetowej przez window.caches, mamy dobrą wiadomość: od Chrome 54 obsługiwany jest pełny zestaw funkcji CacheQueryOptions, co ułatwia znajdowanie odpowiedzi z pamięci podręcznej.

Jakie opcje są dostępne?

Te opcje można ustawić w dowolnym wywołaniu funkcji CacheStorage.match() lub Cache.match(). Gdy nie jest skonfigurowana, wszystkie mają domyślnie wartość false (lub undefined w przypadku cacheName). Można użyć wielu opcji w jednym wywołaniu match().

ignoreSearch

Powoduje to, że algorytm dopasowywania ignoruje część wyszukiwania adresu URL, znaną też jako parametry zapytania w adresie URL. Może to być przydatne, gdy masz źródłowy adres URL, który zawiera parametry zapytania używane np. do śledzenia w Analytics, ale nie mają znaczącego znaczenia, jeśli chodzi o jednoznaczną identyfikację zasobu w pamięci podręcznej. Na przykład wiele osób padło ofiarą następującego skryptu service worker „gotcha”:

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

Ten rodzaj kodu działa zgodnie z oczekiwaniami, gdy użytkownik przechodzi bezpośrednio do usługi index.html. Co jednak, jeśli Twoja aplikacja internetowa korzysta z usług dostawcy analityki do śledzenia linków przychodzących, a użytkownik przechodzi pod adres index.html?utm_source=some-referral? Domyślnie przekazanie danych index.html?utm_source=some-referral do interfejsu caches.match() nie spowoduje zwrócenia wpisu dotyczącego wartości index.html. Jeśli jednak ignoreSearch ma wartość true, możesz pobrać odpowiedź z pamięci podręcznej niezależnie od ustawionych parametrów zapytania:

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

cacheName

cacheName przydaje się, gdy masz wiele pamięci podręcznych i chcesz uzyskać odpowiedź przechowywaną w jednej określonej pamięci podręcznej. Korzystanie z niej może zwiększyć wydajność zapytań (ponieważ przeglądarka musi sprawdzać tylko jedną pamięć podręczną, a nie wszystkie) i umożliwi pobranie konkretnej odpowiedzi dla danego adresu URL, gdy ten adres URL może być użyty w wielu pamięciach podręcznych. Funkcja cacheName ma zastosowanie tylko wtedy, gdy jest używana z CacheStorage.match(), a nie Cache.match(), ponieważ Cache.match() działa już na pojedynczej nazwanej pamięci podręcznej.

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod i ignoreVary

ignoreMethod i ignoreVary to bardziej niszowe miejsca niż ignoreSearch i cacheName, ale służą do konkretnych celów.

ignoreMethod umożliwia przekazanie obiektu Request, który ma dowolny parametr method (POST, PUT itd.) jako pierwszy parametr do match(). Normalnie dozwolone są tylko żądania GET lub HEAD.

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

Jeśli zasada ma wartość true, ignoreVary oznacza, że wyszukiwanie w pamięci podręcznej jest wykonywane bez względu na nagłówki Vary ustawione w odpowiedziach w pamięci podręcznej. Jeśli wiesz, że nie masz do czynienia z odpowiedziami z pamięci podręcznej, które korzystają z nagłówka Vary, nie musisz się przejmować konfigurowaniem tej opcji.

Obsługiwane przeglądarki

Typ CacheQueryOptions ma zastosowanie tylko w przeglądarkach, które obsługują interfejs Cache Storage API. Oprócz przeglądarek opartych na Chrome i Chromium obecnie ta funkcja jest ograniczona do przeglądarki Firefox, która już natywnie obsługuje CacheQueryOptions.

Deweloperzy, którzy chcą używać CacheQueryOptions w wersjach Chrome starszych niż 54, mogą skorzystać z kodu polyfill (udostępnione przez Arthura Stolyara).