Entrar Ainda não tem acesso?
1
resposta

Imagens no cache storage quebradas em modo offline, falha ao carregar js/sw/registra.js

Referente ao curso Progressive Web Apps: crie apps offline, no capítulo Lançamos uma nova versão da app! Como atualizar com Service Workers? e atividade Código da aula anterior

por Fernando Trebien
| 485.4k xp | 9 posts
Analista Judiciário - Tecnologia da Informação

Diferente do mostrado no final do primeiro vídeo da aula 7, o projeto fornecido na aula seguinte não funciona pra mim após cadastrar um usuário, criar um cartão com uma imagem externa, dar um refresh na página, verificar que a imagem realmente está no cache storage ceep-imagens, colocar o navegador em modo offline e dar refresh (uma ou mais vezes). Estou usando o Chromium 68.0.3440.75 no Debian 9.5 64-bit. No console são gerados os seguintes erros:

Document was loaded from Application Cache with manifest http://localhost:8080/offline.manifest - localhost/:1

Application Cache Checking event - localhost/:1

Application Cache NoUpdate event - localhost/:1

**GET** http://localhost:8080/js/sw/registra.js **0 ()** - localhost/:34

▶ **GET** https://static.tudointeressante.com.br/uploads/2014/04/animais-fofos-1.jpg **0 ()** - jquery.js:5322

▶ **GET** https://static.tudointeressante.com.br/uploads/2014/04/animais-fofos-1.jpg **0 ()** - Mural.js:14

▶ **Uncaught (in promise) TypeError: Failed to fetch** - localhost/:1

Entendo que ele está tentando buscar o arquivo js/sw/registra.js, mas não o encontra porque o navegador está em modo offline. Adicionando o arquivo ao offline.manifest, esse primeiro erro some, mas os outros continuam.

Verifiquei que a worker foi registrada, instalada e que está ativa. Tentei adicionar alguns comandos console.log() no tratador do evento fetch no service worker para ver o que estava acontecendo, mas nenhum deles é chamado.

Alguma ideia de qual pode ser a causa dessa diferença de comportamento?

1 resposta
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Fernando,

O js/sw/registra.js realmente não é carregado offline, o que não é um problema, pois só queremos registrar um Service Worker quando estamos online.

Sobre o Service Worker, como vc disse que o console.log não está funcionando no evento de fetch, estou supondo que o Service Worker não está sendo atualizado com o código novo.

Você confirmou que ele está ativo, mas chegou a verificar o código fonte desse Worker que está ativo? Se verificarmos que o código fonte não está com o console.log, confirmaremos que o Service Worker não está sendo atualizado. Para verificar o código fonte do Worker basta clicar no link com o nome do arquivo na aba Application:

Link para código fonte do Service Worker na aba Application

Se o código fonte não estiver sendo atualizado, pode ser que o servidor esteja cacheando o arquivo do Service Worker. Caso esteja usando o http-server recomendado no início do curso, rode-o dizendo que os arquivos terão -1s de tempo de cache, ou seja, não serão cacheados:

http-server -c-1

Apague o cache do navegador e o cache storage e siga o fluxo que estava fazendo para testar esse caso. Confirme se o arquivo do Service Worker foi atualizado. Se sim, tudo deveria funcionar como esperado.

Se não for nada disso e o Service Worker estiver com o código fonte atualizado. Pode ser que o Service Worker esteja sendo ignorado. Isso pode acontecer caso vc ative uma opção chamada Bypass for network lá na aba Application do DevTools do Chrome:

Bypass for network

Essa opção precisa estar desmarcada para que o Service Worker seja utilizado.

Se alguma dessas coisas funcionar ou não, avisa a gente =)

Abraço,

Artur