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, facilitando a localização das respostas em cache que você procura.
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 de análises, mas que não são importantes para identificar exclusivamente um recurso no cache. Por exemplo, muitas pessoas caíram na armadilha do seguinte 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, será possível 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. Usá-la pode tornar suas consultas mais eficientes (já que o navegador só precisa verificar dentro de um cache, em vez de todos eles) 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 a propósitos específicos.
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 vão ser 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 compatíveis com a 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 quiserem usar o CacheQueryOptions em versões do Chrome anteriores à 54 podem usar um polyfill, cortesia de Arthur Stolyar (em inglês).