Com o método getInstalledRelatedApps()
, seu site verifica se
seu app iOS/Android/para computador ou PWA está instalado no dispositivo do usuário;
O que é a API getInstallRelatedApps()?
![](https://web.dev/static/articles/get-installed-related-apps/image/vjamv2uyz6NxBPxPIm11.jpg?authuser=6&hl=pt)
getInstalledRelatedApps()
para determinar se
O app Android já está instalado.
O getInstalledRelatedApps()
possibilita que sua página
verifique se o seu app para dispositivos móveis ou computador ou, em alguns casos, se o
O app da Web (PWA) já está instalado no dispositivo do usuário e permite que você
personalizar a experiência do usuário, se for o caso.
Por exemplo, se o app já estiver instalado:
- Redirecionar o usuário de uma página de marketing de produto diretamente para seu app.
- Centralizar algumas funcionalidades, como notificações em outro app, para evitar notificações duplicadas.
- Não promover a instalação do seu PWA se o outro app já está instalado.
Para usar a API getInstalledRelatedApps()
, é necessário informar ao app sobre
seu site e conte a ele sobre o app. Depois de definir
relação entre os dois, pode verificar se o app está instalado.
Tipos de apps compatíveis que você pode verificar
Tipo de app | Pode ser selecionado em |
---|---|
App para Android |
Somente Android Chrome 80 ou mais recente |
App Windows (UWP) |
Somente no Windows Chrome 85 ou mais recente Edge 85 ou mais recente |
App Web Progressivo instaladas no mesmo escopo ou escopo diferente. |
Somente Android Chrome 84 ou mais recente |
Verificar se o app Android está instalado
Seu site pode verificar se o app Android está instalado.
Android: Chrome 80 ou mais recente
Informar o app Android sobre seu site
Primeiro, você precisa atualizar seu app Android para definir a relação entre seu site e o aplicativo Android usando o Sistema Digital Asset Links. Isso garante que apenas seus site pode verificar se seu app Android está instalado.
Na AndroidManifest.xml
do seu app Android, adicione um asset_statements
.
entrada:
<manifest>
<application>
…
<meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
…
</application>
</manifest>
Em seguida, em strings.xml
, adicione a seguinte instrução de recurso, atualizando site
com
seu domínio. Inclua os caracteres de escape.
<string name="asset_statements">
[{
\"relation\": [\"delegate_permission/common.handle_all_urls\"],
\"target\": {
\"namespace\": \"web\",
\"site\": \"https://example.com\"
}
}]
</string>
Quando terminar, publique o app Android atualizado na Play Store.
Informar seu site sobre o app Android
Em seguida, conte ao seu site sobre seu app Android
como adicionar um manifesto de app da Web à sua página. O manifesto deve
inclua a propriedade related_applications
, uma matriz que fornece os detalhes
sobre o app, incluindo platform
e id
.
platform
precisa serplay
id
é o ID do aplicativo do Google Play para seu app Android.
{
"related_applications": [{
"platform": "play",
"id": "com.android.chrome",
}]
}
Verificar se o app está instalado
Por fim, chame navigator.getInstalledRelatedApps()
para verificar se o
O app Android está instalado.
Confira a demonstração
Verificar se o app do Windows (UWP) está instalado
Seu site pode verificar se o app do Windows (criado usando UWP) está instalado.
Windows: Chrome 85 ou mais recente, Edge 85 ou mais recente
Informar o app Windows sobre seu site
Você precisa atualizar seu app do Windows para definir a relação entre seu site e aplicativo do Windows usando gerenciadores de URI. Isso garante que apenas seu site possa verificar se o app do Windows está instalado.
Adicione o registro da extensão Windows.appUriHandler
ao manifesto do app.
arquivo Package.appxmanifest
. Por exemplo, se o endereço do seu site é
example.com
, adicione a seguinte entrada ao manifesto do app:
<Applications>
<Application Id="App" ... >
...
<Extensions>
<uap3:Extension Category="windows.appUriHandler">
<uap3:AppUriHandler>
<uap3:Host Name="example.com" />
</uap3:AppUriHandler>
</uap3:Extension>
</Extensions>
</Application>
</Applications>
Talvez seja necessário adicionar o namespace uap3
ao seu
<Package>
.
Em seguida, crie um arquivo JSON (sem a extensão de arquivo .json
) chamado
windows-app-web-link
e forneça o nome da família de pacotes do app. Lugar
esse arquivo na raiz do servidor ou no diretório /.well-known/
. Você
encontrar o nome da família de pacotes na seção "Empacotamento" do manifesto do app
designer.
[{
"packageFamilyName": "MyApp_9jmtgj1pbbz6e",
"paths": [ "*" ]
}]
Consulte Ativar aplicativos para sites que usam gerenciadores de URI de aplicativo para detalhes completos sobre como configurar gerenciadores de URI.
Informar seu site sobre o app do Windows
Em seguida, conte ao seu site sobre seu app para Windows
como adicionar um manifesto de app da Web à sua página. O manifesto deve
inclua a propriedade related_applications
, uma matriz que fornece os detalhes
sobre o app, incluindo platform
e id
.
platform
precisa serwindows
id
é o nome da família de pacotes do app, anexado por<Application>
Id
. no arquivoPackage.appxmanifest
.
{
"related_applications": [{
"platform": "windows",
"id": "MyApp_9jmtgj1pbbz6e!App",
}]
}
Verificar se o app está instalado
Por fim, chame navigator.getInstalledRelatedApps()
para verificar se o
O app do Windows está instalado.
Verificar se o Progressive Web App já está instalado (no escopo)
O PWA pode verificar se já está instalado. Nesse caso, a página que fazem a solicitação precisa estar no mesmo domínio e estar dentro do escopo do seu PWA, conforme definido pelo escopo no manifesto do app da Web.
Android: Chrome 84 ou mais recente
Informar o PWA sobre ele mesmo
Informe o PWA sobre ele mesmo adicionando uma entrada related_applications
ao
Manifesto do app da Web de PWAs.
platform
precisa serwebapp
url
é o caminho completo para o manifesto de app da Web do seu PWA
{
…
"scope": "/",
"start_url": "/",
"related_applications": [{
"platform": "webapp",
"url": "https://example.com/manifest.json",
}],
…
}
Verificar se o PWA está instalado
Por fim, chame navigator.getInstalledRelatedApps()
no
escopo do PWA para verificar se ele está instalado. Se
getInstalledRelatedApps()
é chamado fora do escopo do seu PWA,
retorna falso. Consulte a próxima seção para obter detalhes.
Confira a demonstração
Verificar se o Progressive Web App está instalado (fora do escopo)
O site pode verificar se o PWA está instalado, mesmo se a página estiver fora
o escopo do PWA. Por exemplo, uma página de destino veiculada de
O /landing/
pode verificar se o PWA exibido por /pwa/
está instalado ou se seu
a página de destino é veiculada por www.example.com
e o PWA é veiculado por
app.example.com
.
Android: Chrome 84 ou mais recente
Informar o PWA sobre seu site
Primeiro, você vai precisar adicionar os Digital Asset Links ao servidor em que o PWA está veiculado. Isso ajudará a definir a relação entre seu site e o PWA e garante que só o site possa verificar se ele está instalado.
Adicione um arquivo assetlinks.json
ao diretório /.well-known/
.
do domínio em que o PWA reside, por exemplo, app.example.com
. No site
, forneça o caminho completo para o manifesto do app da Web que executará
a verificação (não o manifesto de app da Web do seu PWA).
// Served from https://app.example.com/.well-known/assetlinks.json
[
{
"relation": ["delegate_permission/common.query_webapk"],
"target": {
"namespace": "web",
"site": "https://www.example.com/manifest.json"
}
}
]
Informar seu site sobre o PWA
Em seguida, informe seu site sobre o app PWA
como adicionar um manifesto de app da Web à sua página. O manifesto deve
inclua a propriedade related_applications
, uma matriz que fornece os detalhes
sobre seu PWA, incluindo platform
e url
.
platform
precisa serwebapp
url
é o caminho completo para o manifesto de app da Web do seu PWA
{
"related_applications": [{
"platform": "webapp",
"url": "https://app.example.com/manifest.json",
}]
}
Verificar se o PWA está instalado
Por fim, chame navigator.getInstalledRelatedApps()
para verificar se o
O PWA está instalado.
Confira a demonstração
Como chamar getInstaladoRelatedApps()
Chamar navigator.getInstalledRelatedApps()
retorna uma promessa de que
resolve com uma matriz dos seus apps instalados no dispositivo do usuário.
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
Para evitar que os sites testem um conjunto excessivamente amplo de seus próprios apps, somente os três primeiros apps declarados no manifesto do app da Web serão considerados.
Como a maioria das outras APIs da Web avançadas, a API getInstalledRelatedApps()
é
disponível apenas quando exibido por HTTPS.
Ainda tem dúvidas?
Ainda tem dúvidas? Verifique a tag getInstalledRelatedApps
no StackOverflow.
para ver se mais alguém teve dúvidas semelhantes. Caso contrário, pergunte ao seu
pergunta e marque-a com o
progressive-web-apps
. Nossa equipe monitora com frequência
nessa tag e tenta responder às suas perguntas.
Feedback
Você encontrou um bug na implementação do Chrome? Ou a implementação diferente das especificações?
- Registre um bug em https://new.crbug.com. Incluir o máximo
possível, fornecer instruções simples para reproduzir o bug e
insira
Mobile>WebAPKs
na caixa Componentes. Falha funciona muito bem para o compartilhamento de reproduções rápidas e fáceis.
Mostrar suporte à API
Você planeja usar a API getInstalledRelatedApps()
? Seu perfil público
ajuda a equipe do Chrome a priorizar recursos e mostra outros
fornecedores de navegador quão importante é oferecer suporte a eles.
- Compartilhe como você planeja usar a API na conversa sobre a WCG (em inglês).
- Envie um tweet para @ChromiumDev usando a hashtag
#getInstalledRelatedApps
e informe onde e como você o utiliza.
Links úteis
- Explicação pública sobre a API
getInstalledRelatedApps()
- Rascunho de especificações
- Rastreamento de bug
- Entrada de ChromeStatus.com
- Componente Blink:
Mobile>WebAPKs
Obrigado
Agradecimentos especiais a Sunggook Chue da Microsoft por ajudar com os detalhes para testar apps do Windows e ao Rayan Kanso para receber ajuda com os detalhes do Chrome.