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, domyślnie mają 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 dotyczącą wyszukiwania, 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 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 do 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 będzie można pobrać konkretną odpowiedź 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

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 obiektu Request, który ma dowolny parametr method (POST, PUT itp.).match() 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.