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, isso indica que o app da Web pode ser instalado e que um botão de instalação pode ser exibido para o usuário. O evento beforeinstallprompt é disparado quando o app atende ao e os critérios de instalação.

Capturar o evento permite que os desenvolvedores personalizem a instalação e solicitem ao usuário. instalar quando for 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 o event como uma variável global. vamos precisar dele mais tarde para mostrar prompt de comando.
  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 do botão de instalação

Para mostrar a solicitação de instalação, chame prompt() no beforeinstallprompt salvo. evento. A chamada a 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);
});

Acompanhar o evento de instalação

A instalação de um app da Web por um botão de instalação é apenas uma maneira de os usuários pode instalá-lo. Eles também podem usar o menu do Google Chrome, a minibarra de informações e em um ícone na omnibox. Você pode monitore todas essas formas de instalação detectando o appinstalled. evento.

  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! Agora o app pode ser instalado.

Veja o que mais você pode fazer: