Torne-o instalável

Nov 5, 2018 — Atualizado Feb 12, 2021

Appears in: Aplicações Web Progressivas

Pete LePage

TwitterGitHubGlitchHomepage

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:

• Detecte se seu aplicativo é iniciado na tela inicial
• Mostrar em vez disso o prompt de instalação do aplicativo do sistema operacional