Solicitação de instalação de app nativo

A solicitação de instalação de apps nativos permite que os usuários instalem seu app nativo no dispositivo de forma rápida e fácil diretamente da app store, sem sair do navegador e sem exibir um intersticial irritante.

Quais são os critérios?

Para mostrar a solicitação de instalação de app nativo para o usuário, seu site precisa atender aos seguintes critérios:

Um evento beforeinstallprompt será disparado quando você atender a esses critérios. É possível usá-lo para solicitar que o usuário instale seu app nativo.

.

Propriedades obrigatórias do manifesto

Para solicitar que o usuário instale seu app nativo, adicione duas propriedades ao manifesto do app da Web, prefer_related_applications e related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

A propriedade prefer_related_applications instrui o navegador a solicitar ao usuário o aplicativo nativo em vez do app da Web. Se você deixar esse valor sem definição, ou false, o navegador solicitará que o usuário instale o app da Web.

related_applications é uma matriz com uma lista de objetos que informam ao navegador sobre seu aplicativo nativo preferido. Cada objeto precisa incluir propriedades platform e id. Em que platform é play e id é o ID do app da Play Store.

Mostrar a solicitação de instalação

Para mostrar a caixa de diálogo de instalação, faça o seguinte:

  1. Ouça o evento beforeinstallprompt.
  2. Notifique o usuário de que seu app nativo pode ser instalado com um botão ou outro elemento que gere um evento de gesto do usuário.
  3. Mostre a solicitação chamando prompt() no evento beforeinstallprompt salvo.

Ouvir beforeinstallprompt

Se os critérios forem atendidos, o Chrome vai disparar um evento beforeinstallprompt. Você pode usá-lo para indicar que o app pode ser instalado e, em seguida, solicitar a instalação.

Quando o evento beforeinstallprompt for disparado, salve uma referência ao evento e atualize a interface do usuário para indicar que o usuário pode instalar o app.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Notificar o usuário de que o app pode ser instalado

A melhor maneira de notificar o usuário que seu app pode ser instalado é adicionando um botão ou outro elemento à interface do usuário. Não mostre um intersticial de página inteira ou outros elementos que possam ser irritantes ou distrativos.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Mostrar o comando

Para mostrar a solicitação de instalação, chame prompt() no evento salvo em um gesto do usuário. Ele exibirá uma caixa de diálogo modal, solicitando que o usuário adicione seu app à tela inicial dele.

Em seguida, detecte a promessa retornada pela propriedade userChoice. A promessa vai retornar um objeto com uma propriedade outcome depois que a solicitação for mostrada e o usuário tiver respondido a ele.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

Só é possível chamar prompt() no evento adiado uma vez. Se o usuário dispensar o evento, aguarde até que o evento beforeinstallprompt seja disparado na próxima página de navegação.

Considerações especiais para o uso da Política de Segurança de Conteúdo

Se o site tiver uma Política de Segurança de Conteúdo restritiva, adicione *.googleusercontent.com à diretiva img-src para que o Chrome faça o download do ícone associado ao app na Play Store.

Em alguns casos, *.googleusercontent.com talvez seja mais detalhado do que o desejado. É possível restringir isso fazendo a depuração remota de um dispositivo Android para determinar o URL do ícone do app.