A vantagem da API JavaScript ServiceWorker é que ela permite que os desenvolvedores da Web controlem facilmente os caches. Embora o uso de tecnologias como o ETAGS também seja uma tecnologia para controlar caches, o uso de JavaScript permite que os programas controlem os caches mais poderosos e livremente. Obviamente, Strong tem suas vantagens e desvantagens - você precisa fazer tratamento após cuidados. O chamado tratamento pós-atendimento é limpar o cache.
Vamos dar uma olhada em como criar um objeto de cache, adicionar dados de cache no cache, excluir dados de cache do cache do cache e, finalmente, como excluir completamente o cache.
Determine o suporte do navegador para a API de cache de objeto de cache
Verifique se o navegador suporta a API de cache ...
if ('cache' na janela) {// tem suporte!}… Verifique se existe um objeto de caches na janela.
Crie um objeto de cache
A maneira de criar um objeto de cache é usar cache.open () e passar no nome do cache:
caches.open ('teste cache'). Então (função (cache) {// o cache é criado e você pode acessá-lo agora});Este método de cache.pen retorna uma promessa e o objeto de cache é recém -criado. Se já foi criado antes, não será recriado.
Adicione dados em cache
Para esse tipo de cache, você pode pensar nisso como uma matriz de objetos de solicitação, e os dados de resposta obtidos pela solicitação de solicitação serão armazenados no objeto de cache pelo valor da chave. Existem duas maneiras de adicionar dados ao cache: Adicionar e Adicionar. Use esses dois métodos para adicionar o endereço da solicitação a ser armazenada em cache. Para uma introdução ao objeto de solicitação, você pode consultar o artigo da busca da API.
Use o método Addall para adicionar solicitações de cache em lotes:
caches.open ('teste-cache'). Então (function (cache) {cache.addall (['/', '/images/logo.png']) .then (function () {// cache!});});Esse método Addall pode aceitar uma matriz de endereço como um parâmetro, e os dados de resposta desses endereços de solicitação serão armazenados em cache no objeto de cache. Addall retorna uma promessa. Para adicionar um único endereço, use o método Add:
caches.open ('teste cache'). Então (function (cache) {cache.add ('/page/1'); // o endereço "/página/1" será solicitado e os dados de resposta serão armazenados em cache.});O método add () também pode aceitar uma solicitação personalizada:
caches.open ('teste-cache'). Então (function (cache) {cache.add (new request ('/página/1', {/* parâmetro de solicitação*/});});É muito semelhante ao método add (). O método put () também pode adicionar o endereço de solicitação e adicionar seus dados de resposta ao mesmo tempo:
fetch ('/página/1'). Então (function (resposta) {return caches.open ('teste-cache'). Então (function (cache) {return cache.put ('/page/1', resposta);});});Acesse dados em cache
Para visualizar os dados de solicitação alterados, podemos usar o método KEYS () no objeto Cache para obter todos os objetos de solicitação em cache em um formulário de matriz:
cache.open ('teste-cache'). Então (function (cache) {cache.keys (). Então (function (cachedRequests) {console.log (cacheRequests); // [solicitação, omit]});});/*solicitação {Bodyused: " "Siga" Referencial: "Url:" http://www.webhek.com/images/logo.png"}*/Se você deseja visualizar o conteúdo da resposta da solicitação em cache, pode usar o método cache.match () ou cache.matchall ():
cache.open ('teste-cache'). Então (function (cache) {cache.match ('/page/1'). Então (function (matchEdResponse) {console.log (matchResponse);});});/*resposta {body: (...), bodyuset: false, headers: ok:}); "https://www.webhek.com/page/1"}*/Para obter mais informações sobre o uso e detalhes dos objetos de resposta, você pode consultar o artigo da busca da API.
Excluir dados no cache
Excluir dados do cache, podemos usar o método DELETE () no objeto de cache:
caches.open ('teste cache'). Então (function (cache) {cache.delete ('/página/1');});Dessa forma, não haverá mais dados de solicitação /página /1 no cache.
Obtenha o nome do cache no cache existente
Para obter o nome dos dados do cache que já existem no cache, precisamos usar o método Caches.Keys ():
Caches.Keys (). Então (function (cachekeys) {console.log (cachekeys); // ex: ["teste-cache"]});window.caches.keys () retorna uma promessa.
Exclua um objeto de cache
Para excluir um objeto em cache, você só precisa do nome de chave em cache:
Caches.Delete ('teste-cache'). Então (function () {console.log ('cache excluído com sucesso!');});Como excluir dados em cache antigos em grandes quantidades:
// assume `cache_name` é o nome do novo cache // agora limpe o cache antigo var cache_name = 'versão-8'; // ... caches.keys (). }}));});
Quer se tornar um especialista em trabalhadores de serviço? Vale a pena colocar o código acima em sua biblioteca. O Firefox e o Google Chrome Support Service Worker, e acredito que mais sites e aplicativos usarão essa tecnologia de cache para melhorar sua velocidade de corrida em breve.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.