CacheQueryOptions Chega ao Chrome 54

Jeff Posnick

Se você usa a API Cache Storage em um service worker ou diretamente em apps da Web pelo window.caches, temos boas notícias: a partir do Chrome 54, o conjunto completo de CacheQueryOptions tem suporte, o que facilita a localização das respostas em cache que você está procurando.

Quais opções estão disponíveis?

As opções a seguir podem ser definidas em qualquer chamada para CacheStorage.match() ou Cache.match(). Quando não definido, o padrão é false (ou undefined para cacheName), e é possível usar várias opções em uma única chamada para match().

ignoreSearch

Isso instrui o algoritmo de correspondência a ignorar a parte pesquisa de um URL, também conhecida como parâmetros de consulta do URL. Isso pode ser útil quando você tem um URL de origem que contém parâmetros de consulta usados, por exemplo, para o acompanhamento do Google Analytics, mas que não são significativos para identificar um recurso no cache. Por exemplo, muitas pessoas caíram no seguinte "gotcha" do worker de serviço:

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

Esse tipo de código funciona como esperado quando um usuário navega diretamente para index.html, mas e se o app da Web usar um provedor de análise para acompanhar os links de entrada e o usuário navegar para index.html?utm_source=some-referral? Por padrão, transmitir index.html?utm_source=some-referral para caches.match() não retorna a entrada para index.html. No entanto, se ignoreSearch estiver definido como true, você poderá recuperar a resposta em cache esperada, independentemente dos parâmetros de consulta definidos:

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

cacheName

O cacheName é útil quando você tem vários caches e quer uma resposta armazenada em um cache específico. O uso dele pode tornar suas consultas mais eficientes, já que o navegador só precisa verificar um cache, em vez de todos, e permite que você recupere uma resposta específica para um determinado URL quando vários caches podem ter esse URL como chave. O cacheName só tem efeito quando usado com CacheStorage.match(), não Cache.match(), porque o Cache.match() já opera em um único cache nomeado.

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

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

ignoreMethod e ignoreVary

ignoreMethod e ignoreVary são um pouco mais específicos que ignoreSearch e cacheName, mas servem para finalidades específicas.

ignoreMethod permite transmitir um objeto Request que tenha qualquer method (POST, PUT etc.) como o primeiro parâmetro para match(). Normalmente, apenas solicitações GET ou HEAD são permitidas.

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

Se definido como true, ignoreVary significa que as pesquisas de cache serão feitas sem considerar os cabeçalhos Vary definidos nas respostas em cache. Se você souber que não está lidando com respostas em cache que usam o cabeçalho Vary, não precisa se preocupar em definir essa opção.

Suporte ao navegador

CacheQueryOptions só é relevante em navegadores que oferecem suporte à API Cache Storage. Além dos navegadores baseados no Chrome e no Chromium, isso está atualmente limitado ao Firefox, que já oferece suporte nativo a CacheQueryOptions.

Os desenvolvedores que querem usar CacheQueryOptions em versões do Chrome anteriores à 54 podem usar um polyfill, cortesia de Arthur Stolyar.