Se você usa a API Cache Storage em um service worker ou diretamente de apps da Web via window.caches, temos boas notícias: a partir do Chrome 54, o conjunto completo de CacheQueryOptions é compatível, 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, todos eles são padronizados como false (ou undefined para cacheName), e você pode usar várias opções em uma única chamada para match().
ignoreSearch
Isso instrui o algoritmo de correspondência a ignorar a parte de 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 com parâmetros de consulta usados, por exemplo, para o rastreamento de análise, mas que não são importantes em termos de identificação exclusiva de um recurso no cache. Por exemplo, muitas pessoas foram vítimas do seguinte service worker: "gotcha":
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 rastrear 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 vai retornar a entrada de 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 precisa verificar dentro de um cache, em vez de todos eles) e permite recuperar uma resposta específica para um determinado URL quando vários caches podem ter esse URL como chave. cacheName só tem efeito quando usado com CacheStorage.match(), não com Cache.match(), porque Cache.match() já opera em um único cache nomeado em cache.
// 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 do que ignoreSearch e cacheName, mas servem a fins específicos.
ignoreMethod permite que você transmita 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ê sabe que não está lidando com respostas armazenadas em cache que usam o cabeçalho Variar, não precisa se preocupar em configurar essa opção.
Suporte ao navegador
O CacheQueryOptions só é relevante em navegadores compatíveis com a API Cache Storage. Além do Google Chrome e dos navegadores baseados no Chromium, no momento, ele está limitado ao Firefox, que já tem suporte nativo ao CacheQueryOptions.
Os desenvolvedores que quiserem usar o CacheQueryOptions em versões do Chrome anteriores à 54 poderão usar um polyfill, cortesia de Arthur Stolyar.