Tornar o app instalável

Pete LePage

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.

  1. Clique em Remixar para editar para tornar o projeto editável.
  2. Adicione um manipulador de eventos beforeinstallprompt ao objeto window.
  3. Salve a event como uma variável global. Vamos precisar dela mais tarde para mostrar o comando.
  4. 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.

  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.

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.

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