Pediram para escrever este post sobre uma atualização bastante pequena na API cache do service worker. Eu não achava que isso justificava um artigo, mas depois de um longo debate que acabou em um jogo de pedra, papel e tesoura, eu perdi, então aqui está.
Está tudo pronto para saber sobre as atualizações na implementação da API Cache do Service Worker no Chrome?
Não consigo ouvir você! Você está pronto para saber sobre as atualizações na implementação do Chrome da API de cache do service worker?
(Você só vai ler isso se tiver pulado na cadeira e gritado “YEAHHH!”. Simular o uso de um laço ao mesmo tempo é opcional, mas é bem-vindo.)
cache.addAll chegou no Chrome 46
Sim. Isso mesmo. Cache! Ponto de adição de tudo! Chrome 46!
Ok, ok, sarcasmo à parte, isso é muito importante, já que cache.addAll é a última parte restante do polyfill "essenciais" do cache, o que significa que ele não é mais necessário.
Confira como o cache.addAll funciona:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll recebe uma matriz de URLs e solicitações, as busca e as adiciona ao cache. Isso é transacional: se alguma das transferências ou gravações falhar, toda a operação falhará e o cache será retornado ao estado anterior. Isso é útil principalmente para operações de instalação, como a acima, em que uma falha única precisa ser uma falha geral.
O exemplo acima está em um service worker, mas a API de caches também é totalmente acessível nas páginas.
O Firefox já oferece suporte a essa API na edição para desenvolvedores, então ela será lançada com o restante da implementação do service worker.
Mas não é só isso, há mais melhorias de cache no pipeline…
cache.matchAll no Chrome 47
Isso permite que você tenha várias correspondências:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
A instrução acima vai buscar tudo em mysite-static-v1 que corresponda a /. O cache permite que você tenha várias entradas por URL se elas forem armazenadas em cache de forma independente, por exemplo, se tiverem cabeçalhos Vary diferentes.
O Firefox já oferece suporte a isso na edição para desenvolvedores, então ele será lançado com o restante da implementação do service worker.
Opções de consulta de cache chegando ao Chrome em breve
Confira um gerenciador de busca bastante padrão:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Se o / estiver armazenado em cache e recebermos uma solicitação para /, ela será atendida pelo cache. No entanto, se recebermos uma solicitação para /?utm_source=blahblahwhatever, ela não vai vir do cache. Para contornar esse problema, ignore a string de pesquisa de URL ao fazer a correspondência:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
Agora /?utm_source=blahblahwhatever será associado à entrada de /. As opções completas são:
ignoreSearch: ignora a parte de pesquisa do URL no argumento de solicitação e nas solicitações em cache.ignoreMethod: ignora o método do argumento de solicitação para que uma solicitação POST possa corresponder a uma entrada GET no cache.ignoreVary: ignora o cabeçalho "vary" em respostas armazenadas em cache
O Firefox já oferece suporte a isso no… ok, você já sabe o que fazer. Diga a Ben Kelly o quanto ele é incrível por ter colocado tudo isso no Firefox.
Se você quiser acompanhar a implementação do Chrome das opções de consulta de cache, acesse crbug.com/426309.
Até a próxima, com mais um capítulo emocionante da série "O que implementamos na API de cache".