Solicitação de instalação

Talvez os usuários não conheçam o processo de instalação do PWA. Como desenvolvedor, vocês sabem quando é o momento certo para convidar o usuário a instalar o app. As solicitações de instalação padrão do navegador também podem ser aprimoradas. Vamos dar uma olhada nas ferramentas disponíveis.

Como melhorar a caixa de diálogo de instalação

Os navegadores enviam solicitações de instalação padrão quando os PWAs são aprovados nos critérios de instalação. O navegador usa as propriedades name e icons do manifesto do app da Web para criar o comando.

Solicitação de instalação do Microsoft Edge.

Alguns navegadores melhoram a experiência de solicitação de instalação usando os campos promocionais no manifesto, incluindo description, categories e screenshots. Por exemplo, usando o Chrome no Android, se o PWA fornecer valores para os campos description e screenshots, a experiência da caixa de diálogo de instalação vai mudar de uma pequena barra de informações Adicionar à tela inicial para uma caixa maior e mais detalhada, semelhante às solicitações de instalação de uma app store.

Veja os campos promocionais em ação:

O evento beforeinstallprompt

As solicitações de instalação do navegador são a primeira etapa para incentivar os usuários a instalar o PWA. Para implementar sua própria experiência de instalação, o app ainda precisa transmitir os critérios de instalação: quando o navegador detecta que o app pode ser instalado, ele aciona o evento beforeinstallprompt. Você precisa implementar esse manipulador de eventos para personalizar a experiência do usuário. Veja como fazer isso:

  1. Ouça o evento beforeinstallprompt.
  2. Salve-o (você precisará dele mais tarde).
  3. Acione-o na interface.

Verifique o código abaixo para ver um exemplo de listener de eventos para o evento beforeinstallprompt, a captura e o uso personalizado posteriormente.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

Em seguida, se o usuário clicar no botão de instalação personalizado, use a deferredPrompt que foi salva anteriormente e chame o método prompt(), porque o usuário ainda precisa passar pelo processo do navegador para instalar o app. O que você fez foi atrasar o evento até que você fornecesse ao usuário o contexto certo para incentivá-lo a instalar o PWA.

Ao capturar o evento, você pode adicionar dicas e incentivos para que os usuários instalem seu app, além de solicitar a instalação quando os usuários estiverem mais engajados.

O evento não será disparado se:

  • O usuário já instalou o PWA atual (válido apenas para computadores e WebAPK no Android).
  • O app não atende aos critérios de instalação do PWA.
  • O PWA não pode ser instalado no dispositivo atual por outros motivos (por exemplo, um dispositivo no modo quiosque ou sem permissões).

O melhor lugar para enviar comandos

O local do envio depende do seu aplicativo e de quando os usuários estão mais engajados com seu conteúdo e serviços. Ao capturar a beforeinstallprompt, você pode orientar os usuários sobre os motivos para continuar usando o app e as vantagens que eles vão ter ao instalá-lo. É possível mostrar dicas de instalação em qualquer lugar do app. Alguns padrões comuns são: no menu lateral, após uma jornada crítica do usuário, como a conclusão de um pedido, ou após uma página de inscrição. Leia mais sobre isso em Padrões para promover a instalação de PWA.

Coleta de análises

O uso da análise de dados ajuda a entender melhor onde e quando apresentar seus comandos. Você pode usar a propriedade userChoice do evento beforeinstallprompt. userChoice é uma promessa que será resolvida com a ação realizada pelo usuário.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

Confira na prática

Teste o exemplo a seguir em ação em um navegador Chromium (computador ou Android).

Fallback

Se o navegador não for compatível com o beforeinstallprompt ou o evento não for acionado, não haverá outra maneira de acionar a solicitação de instalação do navegador. No entanto, em plataformas que permitem que o usuário instale PWAs manualmente, como o iOS, você pode mostrar essas instruções para o usuário.

Renderize essas instruções somente no modo de navegador. Outras opções de exibição, como standalone ou fullscreen, significam que o usuário já instalou o app.

Para renderizar o elemento somente no modo de navegador, use a consulta de mídia display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

Bibliotecas

Confira estas bibliotecas para receber ajuda com a renderização de uma solicitação de instalação personalizada:

Recursos