1

Ao listar os arquivos que você quer manter no cache com a versão do service worker, na maioria das vezes colocamos o arquivo de estilo, para ser acessível offline.

Com isso, quando há mudança de CSS, em produção a aplicação pode sofrer com essa divergência de cache do "html/javascript" e o css.

Até mesmo quando se tira o arquivo css da listagem de cache, pode acontecer essa quebra.

No cenário com PWA, quais as soluções que costumam utilizar ou a melhor solução que adotam para não haver quebra de layout em uma nova versão de um PWA?

Ex: acrescentar query string, quando há uma mudança com muita chance de quebra e etc...

1 Resposta 1

2

Tem um jeito de fazer que acho que pode te atender. Eu esqueci o nome dessa técnica, mas ela faz um "versionamento" da URL do arquivo CSS, isso faz com que o browser sempre faça o download do "novo" CSS. O que se faz na verdade é muda um parâmetro no URL do CSS, assim vc força o browser a refazer o cache com o caminho "novo" do arquivo.

Segue um exemplo repare que inicialmente eu tenho um arquivo css.css e depois eu vou mudando o estilo do background no .css e vou salvando no HTML a URL do arquivo como css.css?v=2 e depois css.css?v=3 e por ai vai. Repare que o arquivo sempre é o css.css e eu só mudo o ?v=xxx que vem após no nome do arquivo, isso funcionaria até para caminhos mais complexos como src\main\webapp\resources\css\css.css?v=1 onde na compilação vc trocaria apenas o final por ?v=2 por exemplo. Só isso já é suficiente para fazer o browser reindexar seu .css

inserir a descrição da imagem aqui

Para automatizar isso eu realmente não sei, mas acredito que algum compilador tipo WebPack para PWA tenha essa funcionalidade.

3
  • 1
    Muito obrigado @hugocsl, gostei muito dessa técnica, abriu minha mente para as possibilidades. Pesquisando achei isso com o termo "query strings", e o mais legal, serve para javascript tbm, da mesma forma.
    – David
    Commented 12/07/2019 às 12:30
  • 1
    @David eh isso ai, da pra usar ate com imagem rss, eu mesmo descobri isso para fazer o browser colocar um favicon novo na aba, favicon costuma ficar tão impregnado no cache que só assim consegui resolver.
    – hugocsl
    Commented 12/07/2019 às 12:39
  • Realmente, favicon fica/ficava impregnado kkk vlw Bro !
    – David
    Commented 12/07/2019 às 12:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .