Progressive Web Apps: solicitação e medição da instalação

1. Olá!

Neste laboratório, você vai pegar um PWA instalável e adicionar um botão de instalação no app personalizado. Este é o quinto de uma série de codelabs complementares para o workshop de Progressive Web Apps. O codelab anterior foi Da guia à barra de tarefas. Há mais três codelabs nesta série.

O que você vai aprender

  • Criar um botão personalizado de instalação de PWA no app

O que você precisa saber

  • JavaScript

O que é necessário

2. Começar a configuração

Comece clonando ou fazendo o download do código inicial necessário para concluir este codelab:

Se você clonar o repositório, verifique se está na ramificação pwa04--prompt-measure-install. O arquivo zip também contém o código dessa ramificação.

Essa base de código exige o Node.js 14 ou versões mais recentes. Quando o código estiver disponível, execute npm ci na linha de comando da pasta do código para instalar todas as dependências necessárias. Em seguida, execute npm start para iniciar o servidor de desenvolvimento do codelab.

O arquivo README.md do código-fonte explica todos os arquivos distribuídos. Além disso, estes são os principais arquivos com que você vai trabalhar ao longo deste codelab:

Arquivos de chave

  • js/main.js: arquivo JavaScript principal do aplicativo.

3. Configurar o botão de instalação

Antes de adicionar os comandos de instalação e capturar os eventos de instalação, é preciso fazer algumas configurações. Primeiro, crie um arquivo js/lib/install.js e adicione o seguinte código:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Em seguida, em js/main.js, na parte de baixo do evento DOMContentLoaded, adicione o seguinte código:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Explicação

Esse código configura uma classe de instalação que será usada na próxima etapa e a anexa ao aplicativo em execução.

4. Adicionar listeners de solicitação de instalação

Para usar o botão de instalação e acionar a instalação do PWA, é necessário capturar o pedido de instalação. Quando ele for instalado, você precisará redefinir o aviso de instalação capturado. Para fazer isso, escreva um código para fazer o seguinte no constructor na classe Install em js/lib/install.js:

Capturar solicitação de instalação

  • Detecte o evento beforeinstallprompt em window.
  • Impedir que o evento seja disparado
  • Capturar o comando
  • Mostrar o gatilho do botão de instalação

Redefinir o aviso na instalação

  • Detecte o evento appinstalled em window.
  • Redefinir o comando capturado
  • Ocultar o gatilho do botão de instalação

5. Acionar a instalação com um botão no app

Depois que o aviso for capturado, o botão de instalação do PWA precisará ser capaz de acioná-lo. Para fazer isso, adicione o seguinte à classe Install em js/lib/install.js:

  • Um método async para acionar a instalação que
    • Usa o comando capturado para pedir a instalação
    • await a escolha do usuário para o comando
    • Redefinir o comando
    • Ocultar o botão de instalação se o usuário aceitou a solicitação de instalação
  • Adicione um listener de eventos click ao botão de instalação no constructor da classe que chama o gatilho de instalação.

6. Parabéns!

Agora você já sabe como acionar a instalação de PWAs com seu próprio botão de instalação no app.

O próximo codelab da série é Como potencializar seu PWA