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

O comando 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 na app store, sem sair do navegador e sem mostrar um intersticial irritante.

Quais são os critérios?

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

Um evento beforeinstallprompt será acionado quando você atender a esses critérios. Você pode usá-lo para solicitar que o usuário instale seu app nativo.

Propriedades obrigatórias do manifesto

Para solicitar que o usuário instale o 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 informa ao navegador para solicitar ao usuário o app nativo em vez do app da Web. Se você deixar esse valor indefinido ou false, o navegador vai 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, você precisa:

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

Ouvir beforeinstallprompt

Se os critérios forem atendidos, o Chrome acionará um evento beforeinstallprompt. É possível usá-lo para indicar que o app pode ser instalado e, em seguida, solicitar que o usuário o instale.

Quando o evento beforeinstallprompt for acionado, salve uma referência a ele 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 de 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 incomodar ou distrair.

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 a solicitação

Para mostrar a solicitação de instalação, chame prompt() no evento salvo com um gesto do usuário. Ele vai mostrar uma caixa de diálogo modal, pedindo ao usuário para adicionar seu app à tela inicial.

Em seguida, detecte a promessa retornada pela propriedade userChoice. A promessa retorna um objeto com uma propriedade outcome depois que o comando é mostrado e o usuário responde 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() uma vez no evento adiado. Se o usuário dispensar a notificação, você vai precisar esperar até que o evento beforeinstallprompt seja acionado na próxima navegação de página.

Considerações especiais ao usar a 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 pode ser 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.