CacheQueryOptions w Chrome 54

Jeff Posnick

Jeśli używasz interfejsu Cache Storage API w ramach usługi workera lub bezpośrednio z aplikacji internetowych za pomocą window.caches, mamy dobrą wiadomość: od wersji Chrome 54 obsługiwany jest pełny zestaw CacheQueryOptions, co ułatwia znajdowanie poszukiwanych odpowiedzi z poziomu pamięci podręcznej.

Jakie opcje są dostępne?

Te opcje można ustawić w dowolnym wywołaniu 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 dla jednoznacznego identyfikowania zasobu w pamięci podręcznej. Na przykład wiele osób padło ofiarą tego „chwytu” w ramach usługi workera:

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), a Ty będziesz mieć możliwość uzyskania konkretnej odpowiedzi na dany adres URL, gdy kilka pamięci podręcznych może mieć ten adres URL 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 elementu 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

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

ignoreMethod umożliwia przekazanie jako pierwszego parametru funkcji match() obiektu Request, który ma dowolny typ method (POST, PUT itp.). Zwykle 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 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 masz do czynienia z odpowiadami z buforu, które używają nagłówka Vary, nie musisz się martwić ustawianiem 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.