Como o Chrome lida com as atualizações no manifesto do app da Web

O que é necessário para mudar ícones, atalhos, cores e outros metadados da sua PWA

Adriana Jara
François Beaufort
François Beaufort
GitHub
Pete LePage

Quando um PWA é instalado, o navegador usa informações do manifesto do app da Web para o nome do app, os ícones que ele precisa usar e o URL que precisa ser aberto quando o app é iniciado. Mas e se você precisar atualizar os atalhos do app ou testar uma nova cor de tema? Quando e como essas mudanças são refletidas no navegador?

Na maioria dos casos, as mudanças são refletidas em um ou dois dias após o lançamento do PWA, depois que o manifesto é atualizado.

Atualizações no Chrome para computador

Quando a PWA é lançada ou aberta em uma guia do navegador, o Chrome determina a última vez que o manifesto local foi verificado para mudanças. Se o manifesto não tiver sido verificado desde a última inicialização do navegador ou nas últimas 24 horas, o Chrome vai fazer uma solicitação de rede para o manifesto e, em seguida, comparará com a cópia local.

Se algumas propriedades do manifesto tiverem mudado (consulte a lista abaixo), o Chrome colocará o novo manifesto na fila e, depois que todas as janelas forem fechadas, ele será instalado. Depois de instalado, todos os campos do novo manifesto, exceto icons, são atualizados.

Quais propriedades vão acionar uma atualização?

  • name
  • short_name
  • display (veja abaixo)
  • scope
  • shortcuts
  • start_url
  • theme_color
  • file_handlers

O que acontece quando o campo display é atualizado?

Se você atualizar o modo de exibição do app de browser para standalone, os usuários atuais não vão ter os apps abertos em uma janela após a atualização. Há duas configurações de exibição para um app da Web: a do manifesto (que você controla) e uma configuração de guia de janela/navegador controlada pelo usuário. A preferência do usuário é sempre respeitada.

Como testar atualizações de manifestos

A página chrome://web-app-internals (disponível no Chrome 85 ou mais recente) inclui informações detalhadas sobre todos os PWAs instalados no dispositivo e pode ajudar a entender quando o manifesto foi atualizado pela última vez, com que frequência ele é atualizado e muito mais.

Para forçar manualmente o Chrome a verificar se há um manifesto atualizado, inicie o Chrome com a flag de linha de comando --disable-manifest-update-throttle ou reinicie o Chrome (use about://restart). Isso redefine o timer para que o Chrome verifique se há um manifesto atualizado quando o PWA for iniciado novamente. Em seguida, inicie a PWA. Depois de fechar o PWA, ele precisa ser atualizado com as novas propriedades do manifesto.

Referências

Atualizações no Chrome para Android

Quando a PWA é iniciada, o Chrome determina a última vez que o manifesto local foi verificado para mudanças. Se o manifesto não tiver sido verificado nas últimas 24 horas, o Chrome vai programar uma solicitação de rede para o manifesto e, em seguida, compará-lo com a cópia local.

Se algumas propriedades no manifesto tiverem mudado (confira a lista abaixo), o Chrome vai colocar o novo manifesto na fila. Depois que todas as janelas do PWA forem fechadas, o dispositivo for conectado e conectado ao Wi-Fi, o Chrome vai solicitar um WebAPK atualizado do servidor. Depois de atualizados, todos os campos do novo manifesto são usados.

Quais propriedades vão acionar uma atualização?

  • name
  • short_name
  • icons
  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

Se o Chrome não conseguir um manifesto atualizado do servidor, o tempo entre as verificações poderá ser aumentado para 30 dias.

Como testar atualizações de manifestos

A página about://webapks inclui informações detalhadas sobre todos os PWAs instalados no dispositivo e pode informar quando o manifesto foi atualizado pela última vez, com que frequência ele é atualizado e muito mais.

Para programar manualmente uma atualização do manifesto, substituindo o timer e o manifesto local, faça o seguinte:

  1. Conecte o dispositivo e verifique se ele está conectado ao Wi-Fi.
  2. Use o gerenciador de tarefas do Android para encerrar a PWA e, em seguida, use o painel do app nas configurações do Android para forçar a parada da PWA.
  3. No Chrome, abra about://webapks e clique no botão "Atualizar" do PWA. O status "Atualizar status" vai mudar para "Pendente".
  4. Inicie a PWA e verifique se ela foi carregada corretamente.
  5. Use o gerenciador de tarefas do Android para encerrar a PWA e, em seguida, use o painel de apps nas configurações do Android para forçar a interrupção da PWA.

A PWA geralmente é atualizada em alguns minutos. Depois que a atualização for concluída, o status "Status da atualização" vai mudar para "Concluída".

Referências