Pediram-me para escrever esta postagem em uma atualização razoavelmente pequena na API de cache do service worker. Eu não achei que deveria ter um artigo próprio, mas depois de um longo debate que acabou chegando a um jogo de pedra, papel e tesoura, eu perdi, então aqui está.
Você está pronto para ouvir as atualizações para a implementação do Chrome na API Service Worker Cache?
Não consigo ouvir você! Eu disse: você está pronto para ouvir as atualizações para a implementação do Chrome na API de cache do service worker?
Você só pode continuar lendo se se sentou na cadeira e gritou "ISSO AÍ!". Fingir usar um laço é opcional, mas é recomendado.
cache.addAll chegou no Chrome 46
Sim. Isso mesmo. Cache! Ponto adicionar todos! Chrome 46
Deixando de lado sarcasmo, isso é uma grande conquista, já que cache.addAll é a última parte restante do polyfill de cache essencial, o que significa que ele não é mais necessário.
Veja como 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'
]);
})
);
});
A função addAll usa uma matriz de URLs e solicitações, busca esses URLs e os adiciona ao cache. Isso é transacional. Se alguma das buscas ou gravações falhar, toda a operação vai falhar e o cache retornará ao estado anterior. Isso é particularmente útil para operações de instalação como a mostrada acima, em que uma única falha é uma falha geral.
O exemplo acima está dentro de um service worker, mas a API de caches também é totalmente acessível nas páginas.
O Firefox já é compatível com essa API na edição para desenvolvedores, então ela será usada com o restante da implementação do service worker.
Mas espere, isso não é tudo. O pipeline tem outras melhorias de cache...
cache.matchAll chega ao Chrome 47
Isso permite que você receba várias correspondências:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
A instrução acima vai receber tudo que corresponde a / em mysite-static-v1. O cache permite que você tenha várias entradas por URL, desde que elas possam ser armazenadas em cache de forma independente, por exemplo, se tiverem cabeçalhos Vary diferentes.
O Firefox já oferece suporte para essa opção na edição para desenvolvedores, então será compatível com o restante da implementação do service worker.
Opções de consulta de cache chegando ao Chrome... em breve
Veja um gerenciador de busca padrão:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Se / armazenarmos em cache e recebermos uma solicitação para /, ele será disponibilizado a partir do cache. No entanto, se recebermos uma solicitação para /?utm_source=blahblahwhatever que não virá do cache. Você pode solucionar esse problema ignorando a string de pesquisa do URL durante 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 vai ser correspondido à entrada de /. As opções completas são as seguintes:
ignoreSearch: ignora a parte de pesquisa do URL no argumento da solicitação e nas solicitações em cacheignoreMethod: 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 "varia" nas respostas em cache.
O Firefox já é compatível com isso no... ok você já sabe o que fazer. Conte para o Ben Kelly como ele é ótimo por colocar tudo isso no Firefox.
Se você quiser seguir a implementação do Chrome das opções de consulta de cache, acesse crbug.com/426309.
Vejo você em breve em outro capítulo emocionante sobre "o que implementamos na API de cache".