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()?

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

Verificar se o app Android está instalado

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

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.

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.

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.

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

• 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.