CacheQueryOptions w Chrome 54

Jeff Posnick

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

Jakie opcje są dostępne?

Te opcje można ustawić w dowolnym wywołaniu funkcji CacheStorage.match() lub Cache.match(). Jeśli nie są ustawione, wszystkie mają domyślnie wartość false (lub undefined w przypadku cacheName). W jednym wywołaniu funkcji match() możesz użyć wielu opcji.

ignoreSearch

To polecenie instruuje algorytm dopasowywania, aby zignorować część adresu URL związaną z wyszukiwaniem, czyli parametry zapytania w adresie URL. Może to być przydatne, gdy masz adres URL źródłowy, który zawiera parametry zapytania używane np. do śledzenia w Analytics, ale nie mają one znaczenia z perspektywy jednoznacznego identyfikowania zasobu w pamięci podręcznej. Na przykład wiele osób padło ofiarą tego „chwytu” w usługach:

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 kod działa zgodnie z oczekiwaniami, gdy użytkownik przechodzi bezpośrednio do strony index.html, ale co się stanie, jeśli Twoja aplikacja internetowa korzysta z usługi analitycznej do śledzenia linków przychodzących, a użytkownik przechodzi na stronę index.html?utm_source=some-referral? Domyślnie przekazanie wartości index.html?utm_source=some-referral do funkcji caches.match() nie spowoduje zwrócenia wpisu index.html. Jeśli jednak ignoreSearch ma wartość true, możesz pobrać oczekiwaną odpowiedź z poziomu pamięci podręcznej niezależnie od ustawień parametrów zapytania:

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

cacheName

cacheName jest przydatna, gdy masz wiele pamięci podręcznych i chcesz uzyskać odpowiedź z konkretnej pamięci podręcznej. Dzięki temu zapytania będą bardziej wydajne (ponieważ przeglądarka musi sprawdzić tylko jedno miejsce w pamięci podręcznej zamiast wszystkich) i umożliwi to pobranie konkretnej odpowiedzi na dany adres URL, gdy wiele pamięci podręcznych może mieć ten adres jako klucz. Tag cacheName ma zastosowanie tylko wtedy, gdy jest używany z tagiem CacheStorage.match(), a nie Cache.match(), ponieważ tag Cache.match() działa już na podstawie pojedynczego tagu o nazwie w 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

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

ignoreMethod umożliwia przekazanie jako pierwszego parametru funkcji match() obiektu Request, który ma dowolny typ method (POST, PUT itp.). Normalnie dozwolone jest tylko żądanie 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 ma wartość true, ignoreVary oznacza, że wyszukiwania w pamięci podręcznej będą wykonywane bez uwzględniania żadnych Vary nagłówków ustawionych w odpowiedziach z pamięci podręcznej. Jeśli wiesz, że nie dotyczy to odpowiedzi przechowywanych w pamięci podręcznej, które korzystają z nagłówka Vary, nie musisz ustawiać tej opcji.

Obsługa przeglądarek

CacheQueryOptions ma znaczenie tylko w przypadku przeglądarek, które obsługują interfejs Cache Storage API. Poza przeglądarkami Chrome i Chromium jest ona obecnie ograniczona do przeglądarki Firefox, która obsługuje już domyślnie CacheQueryOptions.

Deweloperzy, którzy chcą używać CacheQueryOptions w wersjach Chrome starszych niż 54, mogą skorzystać z polyfilla autorstwa Arthura Stolyara.