Identificação exclusiva de PWAs pela propriedade do ID do manifesto do app da Web

Pete LePage

Quando o usuário instala seu PWA, o navegador precisa de uma maneira de identificar o PWA. Porém, até pouco tempo atrás, as especificações do manifesto do app da Web não incluíam definir uma maneira de identificar exclusivamente um PWA, deixando os navegadores tomarem decisões e levando a diferentes implementações. Em alguns navegadores, o start_url é usado, enquanto em outros, o caminho para o arquivo de manifesto é usado, tornando-o não é possível atualizar esses campos.

Para resolver esse problema, há uma nova propriedade id opcional no app da Web especificação do manifesto, que permite definir explicitamente o identificador usado para seu PWA. Adicionar a propriedade id ao manifesto remove a dependência start_url ou o local do manifesto e possibilita sejam atualizadas no futuro.

O que a propriedade id faz?

A propriedade id representa a identidade do PWA para o navegador. Quando o navegador encontra um manifesto que não tem uma identidade que corresponde a o PWA já instalado, será tratado como um novo PWA, mesmo que seja do mesmo URL de outro PWA. Mas, se houver um manifesto com uma identidade que corresponde ao PWA já instalado, ele o tratará como o PWA instalado.

Suporte ao navegador

O suporte para a propriedade id chegou ao Chrome 96.

O que devo fazer se eu tiver um app sem uma id?

Não há nada que você precise fazer, e nada vai dar errado se você não adicione um id ao manifesto do app da Web (contanto que start_url e o caminho do manifesto permanece o mesmo). Para preparar seu PWA para o futuro, adicione uma propriedade id ao manifesto do app da Web.

Como determinar e definir meu id?

A maneira mais segura e precisa de determinar o id para um PWA é verificar o valor calculado pelo Chrome.

  1. No Chrome 96 ou mais recente, abra o Painel Manifest do painel Application no DevTools.
  2. Passe o cursor do mouse sobre o ícone (!) ao lado da propriedade App Id. A O ícone de dica (!) só vai aparecer quando id não for especificado na o arquivo de manifesto do app da Web.
  3. Observe o valor id mostrado na dica de ferramenta (veja a captura de tela abaixo).
  4. Adicione uma propriedade id ao manifesto do app da Web usando o valor id mostrado no na dica.

Dica mostrando o "ID" .

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

E se eu não definir um id?

Não se preocupe, nada vai quebrar. A partir do Chrome 96, a o navegador gerará uma id se não houver uma no manifesto. com base no start_url no manifesto do app da Web.

Adicionar um id ao manifesto do app da Web possibilita para mudar a start_url e o caminho do manifesto (apenas se a propriedade origin permanece a mesma!), porque o navegador identifica o PWA com base no id especificado, em vez do start_url ou caminho do manifesto.

Como faço para testar isso?

Para testar o comportamento, siga estas etapas:

  1. Instale o PWA.
  2. Abra about://web-app-internals/ e verifique o unhashed_app_id e Propriedade start_url para o PWA instalado.
  3. Adicione uma propriedade id ao manifesto do app da Web seguindo as etapas em Como determinar e definir meu id acima.
  4. Reinicie o navegador usando chrome://restart e inicie o PWA about://apps e feche o PWA para forçar a atualização do arquivo de manifesto.
  5. Abra about://web-app-internals/ e verifique se a propriedade manifest_id o PWA instalado para confirmar se não mudou.
  6. Mude o start_url no manifesto do app da Web.
  7. Reinicie o navegador usando chrome://restart e inicie o PWA about://apps e feche o PWA para forçar a atualização do arquivo de manifesto.
  8. Abra about://web-app-internals/ e verifique se a propriedade start_url o PWA instalado para verificar se ele foi atualizado como esperado.

Outros recursos