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.