Esta página foi traduzida pela API Cloud Translation.

Seu app está instalado? getinstaladoRelatedApps() vai avisar você!

Com o método getInstalledRelatedApps(), seu site verifica se seu app iOS/Android/para computador ou PWA está instalado no dispositivo do usuário;

Pete LePage

O que é a API getInstallRelatedApps()?

Um site usa `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

Observação : a API getInstalledRelatedApps() só permite conferir se seus apps estão instalados. Não é possível ver uma lista de todos os apps instalados nem verificar se outros apps de terceiros estão instalados.

Verificar se o app Android está instalado

Seu site pode verificar se o app Android está instalado.

Compatível com

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 ser play
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.

Compatível com

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 ser windows
id é o nome da família de pacotes do app, anexado por <Application> Id. no arquivo Package.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.

Compatível com

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 ser webapp
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.

Compatível 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"
    }
  }
]

Observação : verifique o nome do arquivo ao criar o arquivo assetlinks.json. Perdi muitas horas na depuração e percebi que adicionei um "s" extra. no nome do arquivo.

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 ser webapp
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

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.