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.
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:
- Ouça o evento
beforeinstallprompt
. - Salve-o (você precisará dele mais tarde).
- 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:
- Criador de PWA
- Prompt do instalador de PWA para React
- Reação de instalação de PWA
- Instalar PWA do Vue
- Adicionar à tela inicial