Tornar o app instalável

Pete LePage

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.

Capturar o evento permite que os desenvolvedores personalizem a instalação e solicitem que o usuário faça a instalação quando considerarem o melhor momento.

  1. Clique em Remix to Edit para 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 prompt.
  4. Mostrar 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 por 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 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.

  1. Adicione um manipulador de eventos appinstalled ao objeto window.
  2. 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: