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