Tornar o app instalável

Pete LePage

Detectar o evento beforeinstallprompt

Quando o navegador aciona o evento beforeinstallprompt, isso indica que o app da Web pode ser instalado e um botão de instalação pode ser mostrado ao usuário. O evento beforeinstallprompt é disparado 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 instale quando considerarem que é o melhor momento.

  1. Clique em Remixar para editar e tornar o projeto editável.
  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 comando.
  4. 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.

  1. Adicione um manipulador de eventos de clique para o botão de instalação.
  2. Chame prompt() no evento beforeinstallprompt salvo.
  3. Registre os resultados do comando.
  4. Defina o evento beforeinstallprompt salvo como nulo.
  5. 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 web app usando um botão de instalação é apenas uma das maneiras de fazer isso. Eles também podem usar o menu do Chrome, a mini barra de informações e um ícone na omnibox. É possível rastrear todas essas formas de instalação detectando o evento appinstalled.

  1. Adicione um manipulador de eventos appinstalled ao objeto window.
  2. Registre o evento de instalação no 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, seu app já pode ser instalado!

Confira outras opções: