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 identificá-lo de maneira exclusiva. No entanto, até recentemente, a especificação do manifesto do app da Web não define explicitamente uma maneira de identificar exclusivamente um PWA, deixando os navegadores decidirem e levando a implementações diferentes. O start_url é usado em alguns navegadores. Em outros, o caminho para o arquivo de manifesto é usado, o que impossibilita a atualização de qualquer um desses campos.

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

O que a propriedade id faz?

A propriedade id representa a identidade do PWA para o navegador. Quando o navegador encontrar um manifesto que não tenha uma identidade que corresponda a um PWA já instalado, ele o tratará como um novo PWA, mesmo que ele seja exibido no mesmo URL que outro PWA. No entanto, se ele vir um manifesto com uma identidade que corresponda ao PWA já instalado, ele o tratará como o PWA instalado.

Suporte ao navegador

A compatibilidade com a propriedade id chegou ao Chrome 96.

O que devo fazer se tiver um app sem id?

Não é necessário fazer nada, e nada vai ser corrompido se você não adicionar um id ao manifesto do app da Web, desde que o start_url e o caminho do manifesto permaneçam os mesmos. Para preparar seu PWA para o futuro, adicione uma propriedade id ao manifesto do seu app da Web.

Como determinar e definir meu id?

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

  1. No Chrome 96 ou versão 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. O ícone de dica (!) só aparece quando id não é especificado no arquivo de manifesto do app da Web.
  3. Observe o valor id mostrado na dica da ferramenta (confira a captura de tela abaixo).
  4. Adicione uma propriedade id ao manifesto do app da Web usando o valor id mostrado na dica.

Dica mostrando o valor de "id".

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

E se eu não definir um id?

Não se preocupe, nada vai falhar. A partir do Chrome 96, o navegador vai gerar um id se não houver um no manifesto com base em start_url no manifesto do app da Web.

Adicionar um id ao manifesto do app da Web permite alterar o start_url e o caminho do manifesto (se e somente se a origem deles permanecer a mesma), porque o navegador vai identificar o PWA com base no id especificado, em vez de 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 as propriedades unhashed_app_id e start_url do PWA instalado.
  3. Adicione uma propriedade id ao manifesto do seu app da Web seguindo as etapas em Como determinar e definir meu id acima.
  4. Reinicie o navegador usando chrome://restart, inicie o PWA em about://apps e feche-o para forçar a atualização do arquivo de manifesto.
  5. Abra about://web-app-internals/ e verifique a propriedade manifest_id do PWA instalado para confirmar se ele não foi alterado.
  6. Mude o start_url no manifesto do app da Web.
  7. Reinicie o navegador usando chrome://restart, inicie o PWA em about://apps e feche-o para forçar a atualização do arquivo de manifesto.
  8. Abra about://web-app-internals/ e verifique a propriedade start_url do PWA instalado para verificar se ele foi atualizado conforme o esperado.

Outros recursos