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

O prompt de instalação do aplicativo nativo permite que os usuários de forma rápida e instalar com facilidade seu aplicativo nativo no dispositivo deles diretamente da loja de aplicativos, 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:

  • Nem o aplicativo da Web nem o aplicativo nativo instalado no momento no dispositivo.
  • Inclui um Manifesto de app da Web que inclui:
  • Veiculado por HTTPS

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 deve incluir uma propriedade platform e uma 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. Notificar o usuário de que seu aplicativo nativo pode ser instalado com um botão ou outro que vai gerar um evento de gesto do usuário.
  3. Para mostrar a solicitação, chame prompt() no beforeinstallprompt salvo. evento.

Ouvir beforeinstallprompt

Se os critérios forem atendidos, o Chrome acionará beforeinstallprompt. evento. Você pode 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 ao evento. e atualize a interface do usuário para indicar que ele 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 que seu 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 mostrar 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. a partir de um gesto do usuário. Será exibida uma caixa de diálogo modal, perguntando ao usuário para adicionar seu aplicativo à tela inicial.

Em seguida, detecte a promessa retornada pela propriedade userChoice. O promise retorna um objeto com uma propriedade outcome após o prompt mostrado e o usuário respondeu 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 será preciso esperar até que o evento beforeinstallprompt seja disparado em a navegação da próxima página.

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

Se seu site tiver uma Política de Segurança de Conteúdo restritiva, adicione *.googleusercontent.com à diretiva img-src para que o Chrome pode fazer 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.