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:
short_name
name
(usado na solicitação do banner)icons
, incluindo uma versão de 192 px e outra de 512 pxprefer_related_applications
estátrue
- Objeto
related_applications
com informações sobre o app
- 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"
}
]
prefer_related_applications
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
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:
- Ouça o evento
beforeinstallprompt
. - 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.
- Para mostrar a solicitação, chame
prompt()
nobeforeinstallprompt
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.