Cache Storage do Chrome não atualiza | Progressive Web Apps: crie apps offline

3
respostas

Referente ao curso Progressive Web Apps: crie apps offline

por Fernando Seguim

| 153.5k xp | 19 posts

Aspirante à Engenheiro de Software

Criei o Service Worker abaixo, no entanto ele não tem funcionado como esperado, quando atualizo o SW no Chrome, mesmo forçando a atualização o SW continua carregando os arquivos do cache ao invés do servidor.

let version = "0.1.1"

let arquivos = [
    "/",
    "css/estilos.css",
    "css/opcoesDaPagina.css",
    "css/opcoesDoCartao.css",
    "css/cabecalho.css",
    "css/login.css",
    "css/loginForm.css",
    "css/loginStatus.css",
    "css/cartao.css",
    "css/novoCartao.css",
    "css/mural.css",
    "js/lib/jquery.js",
    "js/lib/eventemitter2.js",
    "js/lib/KeyBoardNavigation.js",
    "js/tags/Tags.js",
    "js/cabecalho/mudaLayout.js",
    "js/cabecalho/busca.js",
    "js/filtro/Filtro.js",
    "js/tipos/TiposCartao.js",
    "js/cartao/render/Cartao_renderHelpers.js",
    "js/cartao/render/CartaoOpcoes_render.js",
    "js/cartao/render/CartaoConteudo_render.js",
    "js/cartao/render/Cartao_render.js",
    "js/cartao/Cartao.js",
    "js/login/LoginUsuario_render.js",
    "js/login/LoginUsuario.js",
    "js/mural/render/Mural_render.js",
    "js/mural/Mural.js",
    "js/cabecalho/novoCartao.js",
    "img/bin.svg",
    "img/bin2.svg",
    "img/close.svg",
    "img/edit.svg",
    "img/palette.svg"]

self.addEventListener("activate", function () {
    caches.open("pwa-notes-appfiles-" + version).then(cache => {
        cache.addAll(arquivos).then(function () {
            caches.delete("pwa-notes-appfiles-" + (version-1))
        })
    })
})

self.addEventListener("fetch", function  (event) {

    let pedido = event.request
    let promisse = caches.match(pedido).then(respotaCache => {

        let resposta = respotaCache ? respotaCache : fetch(pedido)
        return resposta
    })

    event.respondWith(promisse)
})

O estranho é que esse comportamento só ocorre no Chrome, no Firefox o SW atualiza corretamente os aquivos... Será que alguém tem um ideia do que possa estar acontecendo?

A aplicação completa está no meu GitHub: https://github.com/fernandoseguim/progressive-web-app-alura

3 respostas

por Phillip Nunes

| 99.7k xp | 39 posts

Desenvolvedor

17/05/2017

Tentou aba anônima?

Mas se for o cache do Chrome, tenta 1º apertar CTRL + SHIFT + R, e se isso não resolver, dai tenta o seguinte:

Com o inspetor de elementos aberto, segure a tecla CTRL e clica com o botão direito do mouse em cima do atualizar do navegador (aquele ao lado de onde vc digita a url). Dai clica na terceira opção, chamada "Esvaziar cache e recarregamento forçado". http://prntscr.com/f8pwh9

Espero que ajude.

por Phillip Nunes

| 99.7k xp | 39 posts

Desenvolvedor

17/05/2017

A resposta marcada como solução cita uma configuração no Chrome referente a cache também: http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development

por Artur Diniz Adam

| 100.4k xp | 155 posts

Alura Scuba Team Desenvolvedor e Instrutor

17/05/2017

Fala Fernando,

O único momento em que o Chrome vai pedir os arquivos pro servidor é quando o Service Worker for ativado. Você deve conseguir ver isso na aba Network quando clicar no botão de "skipWaiting" para ativar o Service Worker novo. A aba network vai mostrar uma engrenagem no nome dos arquivos que foram pedidos dentro do Service Worker.

No caso do seu código, mesmo com um cache novo sendo criado a cada ativação, a instrução caches.match(pedido) vai voltar com a primeira resposta que ele achar em qualquer cache, no caso, vai ser o cache da versão anterior. Se quiser usar a instrução caches.match(pedido), é necessário apagar o cache da versão anterior.

Outra solução é acessar o cache específico da versão atual e procurar os arquivos no cache da versão atual:

caches.open("pwa-notes-appfiles-" + version).then(cache => {
    cache.match(pedido)
})

Abraço,

Artur