Essa falha 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 que fica oculto por padrão.
Detectar o evento beforeinstallprompt
Quando o navegador dispara o evento beforeinstallprompt
, essa é a indicação
de 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
é disparado quando o app atende aos critérios de instalação.
Capturar o evento permite que os desenvolvedores personalizem a instalação e solicitem ao usuário a instalação quando considerarem que é o melhor momento.
- Clique em Remixar para editar para tornar o projeto editável.
- Adicione um manipulador de eventos
beforeinstallprompt
ao objetowindow
. - Salve a
event
como uma variável global. Vamos precisar dela mais tarde para mostrar o comando. - Mostrar o botão de instalação.
Código:
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 do 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 com 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.
Código:
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);
});
Acompanhar o evento de instalação
A instalação de um app da Web por meio de um botão de instalação é apenas uma das maneiras pelas quais os usuários podem fazer a instalação. Eles também podem usar o menu do Chrome, a minibarra de informações e por meio de um ícone na omnibox. É possível
acompanhar 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 Analytics ou em outro mecanismo.
Código:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
Sugestões de leitura
Parabéns, seu app já pode ser instalado.
O que mais você pode fazer: