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.
- No Chrome 96 ou versão mais recente, abra o painel Manifest do painel Application no DevTools.
- Passe o cursor do mouse sobre o ícone
(!)
ao lado da propriedade App Id. O ícone de dica(!)
só aparece quandoid
não é especificado no arquivo de manifesto do app da Web. - Observe o valor
id
mostrado na dica da ferramenta (confira a captura de tela abaixo). - Adicione uma propriedade
id
ao manifesto do app da Web usando o valorid
mostrado na dica.
{
...
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:
- Instale o PWA.
- Abra
about://web-app-internals/
e verifique as propriedadesunhashed_app_id
estart_url
do PWA instalado. - Adicione uma propriedade
id
ao manifesto do seu app da Web seguindo as etapas em Como determinar e definir meuid
acima. - Reinicie o navegador usando
chrome://restart
, inicie o PWA emabout://apps
e feche-o para forçar a atualização do arquivo de manifesto. - Abra
about://web-app-internals/
e verifique a propriedademanifest_id
do PWA instalado para confirmar se ele não foi alterado. - Mude o
start_url
no manifesto do app da Web. - Reinicie o navegador usando
chrome://restart
, inicie o PWA emabout://apps
e feche-o para forçar a atualização do arquivo de manifesto. - Abra
about://web-app-internals/
e verifique a propriedadestart_url
do PWA instalado para verificar se ele foi atualizado conforme o esperado.