Esse problema técnico contém o manifesto da Web com os campos obrigatórios para tornar um app da Web instalável.
Ele também tem um botão de instalação oculto por padrão.
Detectar o evento beforeinstallprompt
Quando o navegador dispara o evento beforeinstallprompt
, isso indica
que o app da Web pode ser instalado e que um botão de instalação pode ser mostrado
ao usuário. O evento beforeinstallprompt
é acionado quando o app atende aos critérios
de instalabilidade.
A captura do evento permite que os desenvolvedores personalizem a instalação e solicitem que o usuário faça a instalação quando considerar que é o melhor momento.
- Clique em Remix to Edit para tornar o projeto editável.
- Adicione um manipulador de eventos
beforeinstallprompt
ao objetowindow
. - Salve o
event
como uma variável global. Vamos precisar dele mais tarde para mostrar o prompt. - Mostre o botão de instalação.
Code:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
Processar o clique no botão de instalação
Para mostrar a solicitação de instalação, chame prompt()
no evento beforeinstallprompt
salvo. A chamada de prompt()
é feita no gerenciador de cliques do botão de instalação porque
prompt()
precisa ser chamado de um gesto do usuário.
- Adicione um manipulador de eventos de clique para o botão de instalação.
- Chame
prompt()
no eventobeforeinstallprompt
salvo. - Registre os resultados do comando.
- Defina o evento
beforeinstallprompt
salvo como nulo. - Ocultar o botão de instalação.
Code:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
Rastrear o evento de instalação
Instalar um app da Web usando um botão de instalação é apenas uma das maneiras de
instalação. Também é possível usar o menu do Chrome, a minibarra de informações e
um ícone na omnibox. É possível
rastrear todas essas formas de instalação detectando o evento
appinstalled
.
- Adicione um manipulador de eventos
appinstalled
ao objetowindow
. - Registre o evento de instalação no Google Analytics ou em outro mecanismo.
Code:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Leitura adicional
Parabéns, agora seu app pode ser instalado.
Confira outras opções: