A incrível API ServiceWorker foi criada para dar aos desenvolvedores um pouco mais de controle sobre o que é e o que não é armazenado em cache, e como. É claro que podemos brincar com ETags e coisas do gênero, mas fazer isso de forma programática com JavaScript parece melhor e mais controlável. No entanto, como acontece com todas as APIs, adicionar coisas ao cache não é apenas diversão e jogos – o senhor também precisa fazer o trabalho de limpeza, e por “trabalho de limpeza” quero dizer ter que excluir o cache.
Vamos dar uma olhada em como o senhor pode obter caches, adicionar e excluir solicitações de caches e como pode excluir um cache inteiro!
Detectando o cache API
Para detectar se o navegador é compatível com a API de cache…
if('caches' in window) {
// Has support!
}
…verifique a presença do caches dentro do objeto window.
Criando um cache
A criação de um cache requer um caches.open com um nome de cache:
caches.open('test-cache').then(function(cache) {
// Cache is created and accessible
});
O caches.open retorna um Promessa e o cache que foi criado ou já existia antes do open chamada.
Adicionando ao cache
O senhor pode pensar em um cache como uma matriz de Request objetos que funcionam como chaves para suas respostas, que são armazenadas pelo navegador;
A adição simples ao cache é feita por meio de dois métodos principais: add e addAll. O senhor pode fornecer a esses métodos uma string para a URL que deve ser
buscado e armazenado em cache ou um Request . O senhor pode saber mais sobre Request lendo meu artigo sobre objetos buscar API post.
Para adicionar URLs em lote ao cache, o senhor pode usar o comando addAll method:
caches.open('test-cache').then(function(cache) {
cache.addAll(['/', '/images/logo.png'])
.then(function() {
// Cached!
});
});
O addAll aceita uma matriz de URLs cujas URLs e respostas devem ser armazenadas em cache. addAll retorna uma Promise. Para adicionar um único URL, use a opção add :
caches.open('test-cache').then(function(cache) {
cache.add('/page/1'); // "/page/1" URL will be fetched and cached!
});
add também pode aceitar um Request:
caches.open('test-cache').then(function(cache) {
cache.add(new Request('/page/1', { /* request options */ }));
});
Semelhante a add é put no qual o senhor pode adicionar uma URL e seu Response objeto:
fetch('/page/1').then(function(response) {
return caches.open('test-cache').then(function(cache) {
return cache.put('/page/1', response);
});
});
Explorando o cache
Para visualizar as solicitações que já foram armazenadas em cache, o senhor pode usar a função keys do cache individual para recuperar uma matriz de Request objetos:
caches.open('test-cache').then(function(cache) {
cache.keys().then(function(cachedRequests) {
console.log(cachedRequests); // [Request, Request]
});
});
/*
Request {
bodyUsed: false
credentials: "omit"
headers: Headers
integrity: ""
method: "GET"
mode: "no-cors"
redirect: "follow"
referrer: ""
url: "https://fullhost.tld/images/logo.png"
}
*/
Se o senhor quiser ver a resposta de um arquivo Requestem cache, o senhor pode fazer isso usando cache.match ou cache.matchAll:
caches.open('test-cache').then(function(cache) {
cache.match('/page/1').then(function(matchedResponse) {
console.log(matchedResponse);
});
});
/*
Response {
body: (...),
bodyUsed: false,
headers: Headers,
ok: true,
status: 200,
statusText: "OK",
type: "basic",
url: "https://davidwalsh.name/page/1"
}
*/
O senhor pode saber mais sobre Response lendo meu artigo buscar API post.
Remoção de uma solicitação em cache
Para remover uma solicitação do cache, use a função delete do cache:
caches.open('test-cache').then(function(cache) {
cache.delete('/page/1');
});
O cache não conterá mais /page/1!
Obtendo nomes de cache existentes
Para obter os nomes dos caches existentes, use caches.keys:
caches.keys().then(function(cacheKeys) {
console.log(cacheKeys); // ex: ["test-cache"]
});
window.caches.keys() retorna novamente um promessa.
Exclusão de um cache
A exclusão de um cache é simples quando o senhor tem o nome da chave do cache:
caches.delete('test-cache').then(function() {
console.log('Cache successfully deleted!');
});
Muitas vezes, o senhor excluirá um cache quando estiver substituindo por um novo (para acionar a reinstalação de um novo service worker):
// Assuming `CACHE_NAME` is the newest name
// Time to clean up the old!
var CACHE_NAME = 'version-8';
// ...
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if(cacheName != CACHE_NAME) {
return caches.delete(cacheName);
}
})
);
});
O senhor deve manter esses snippets em sua caixa de ferramentas para quando quiser se tornar um especialista em service worker. O Chrome e o Firefox agora têm suporte para service worker, portanto, o senhor verá muito mais sites/aplicativos disponíveis (de forma confiável) off-line e carregando em taxas muito mais rápidas. Aproveite!
