Problemas de cache no Flutter Web

Se você começou a se aventurar no Flutter Web, provavelmente já se deparou com a seguinte situação:

Você terminou o desendesenvolvimento e lançou para que os seus clientes pudessem utilizar, porém depois de um tempo você desenvolveu uma funcionalidade nova ou até mesmo corrigiu um bug.

Tudo pronto, então você decide subir as alterações, só que quando você vai testar no seu navegador, a atualização não aparece.

Uma solução que temos é limpar o cache do site no navegador, depois atualizar a página.

Óbvio que essa solução não é nenhum pouco atraente, imagine você ter que dizer para todos os seus clientes limparem o cache do navegador para receber a atualização mais recente ? Seria muito ruim.

Então veja esta solução:

No seu projeto Flutter Web, você tem um arquivo chamado index.html que fica dentro da pasta web.

Entre nesse arquivo e procure por main.dart.js que estará em uma tag script.

O que você precisa fazer é adicionar um ? após o js, agora você pode informar um número ou um prefixo, como prefir.

Eu gosto de usar nesse formato: main.dart.js?version=1.0.0

Pronto, quando você lançar uma nova versão, basta incrementar esse valor e subir suas alterações, quando seus clientes acessarem seu projeto, receberão a versão mais recente dele.

No PHP costumamos fazer de uma forma um pouco diferente, mas com a mesma premissa, apenas mais automatizada:

Nós calculamos o hash do arquivo JS que será chamado, e o resultado colocamos como parâmtro na frente do "?". O "version" não é necessário, é opcional. Exemplo:

main.dart.js?{{ $mainJs_hash }}

Na hora de exibir, o resultado será um número único para aquela versão do arquivo, se qualquer coisa nele for alterado em seguida, a hash se altera por completo e automaticamente """limpa o cache""" do usuário.

Se no flutter tiver uma opção ou pacote parecido, seria bom considerar. Otimiza bastante tempo.

Gostei, achei interessante. Realmente acelera o processo, obrigado pelo comentário!