Torne-o instalável

— Atualizado
Appears in: Aplicações Web Progressivas

Esse glitch já contém os componentes críticos necessários para tornar instalável um Progressive Web App, incluindo um service worker muito simples e um manifesto de aplicativo web. Ele também possui um botão de instalação que está oculto por padrão.

Fique à escuta do evento beforeinstallprompt #

Quando o navegador dispara o beforeinstallprompt, é a indicação de que o Progressive Web App pode ser instalado e um botão de instalação pode ser mostrado ao usuário. O beforeinstallprompt é disparado quando o PWA atender aos critérios de instalabilidade.

  1. Click Remix to Edit to make the project editable.

  2. Adicione um manipulador de eventos beforeinstallprompt ao objeto window

  3. Salve o event como uma variável global; vamos precisar dele mais tarde para mostrar o prompt.

  4. Exiba o botão de instalação.

Código:

window.addEventListener('beforeinstallprompt', (event) => {
// Impedir que o mini-infobar apareça no celular.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Esconder o evento para que possa ser acionado mais tarde.
window.deferredPrompt = event;
// Remover a classe 'oculta' do contêiner do botão de instalação.
divInstall.classList.toggle('hidden', false);
});

Tratar o clique do botão de instalação #

Para mostrar o prompt de instalação, chame prompt() no evento beforeinstallprompt Chamar prompt() é feito no manipulador de clique do botão de instalação porque prompt() deve ser chamado a partir de um gesto do usuário.

  1. Adicione um manipulador de eventos de clique para o botão de instalação.
  2. Call prompt() no evento beforeinstallprompt
  3. Registre os resultados do prompt.
  4. Defina o beforeinstallprompt salvo como null.
  5. Oculte 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);
});

Acompanhe o evento de instalação #

Instalar um Progressive Web App por meio de um botão de instalação é apenas uma maneira de os usuários instalarem um PWA. Eles também podem usar o menu do Chrome, a minibarra de informações e através de um ícone na caixa geral . Você pode acompanhar todas essas formas de instalação escutando o evento appinstalled

  1. Adicione um manipulador de eventos appinstalled ao objeto de window
  2. Registre o evento de instalação em análises ou outro mecanismo.

Código:

window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Limpa o deferredPrompt para que possa ser coletado como lixo
window.deferredPrompt = null;
});

Leitura adicional #

Parabéns, seu aplicativo agora pode ser instalado!

Aqui estão mais coisas que você pode fazer:

Last updated: Improve article