Solicitação de instalação

Talvez os usuários não conheçam o processo de instalação do PWA. Como desenvolvedor, você saberá quando é o momento certo de convidar o usuário a instalar o aplicativo. As solicitações de instalação de navegador padrão também podem ser aprimoradas. Vamos conferir as ferramentas disponíveis.

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

Os navegadores fornecem solicitações de instalação padrão quando os PWAs passam pelos 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 da solicitação de instalação usando os campos promocionais no manifesto, incluindo description, categories e screenshots. Por exemplo, ao usar 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 de diálogo 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 fazer com que os usuários instalem seu 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 detectar que o app pode ser instalado, ele acionará 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. Acioná-lo na interface.
.

Confira no código abaixo um exemplo de listener para o evento beforeinstallprompt, sua captura e uso personalizado posterior.

// 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 o deferredPrompt que foi salvo anteriormente e chame o método prompt(), porque o usuário ainda precisa passar pelo processo do navegador para instalar o app. Você adie o evento até fornecer ao usuário o contexto certo para incentivá-lo a instalar o PWA.

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

O evento não será disparado se:

  • O usuário já instalou o PWA atual (válido apenas para computador 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 de solicitação depende do aplicativo e de quando os usuários estão mais engajados com seu conteúdo e serviços. Ao capturar o 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. Você pode 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 do PWA.

Coleta de análises

O uso de análises 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 (para computador ou Android).

Fallback

Se o navegador não for compatível com a beforeinstallprompt ou o evento não for disparado, 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.

Só renderize essas instruções no modo navegador. Outras opções de exibição, como standalone ou fullscreen, indicam 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 sobre a renderização de um prompt de instalação personalizada:

Recursos