Muitos navegadores permitem ativar e promover a instalação do seu Progressive Web App (PWA) diretamente na interface do usuário. A instalação (anteriormente chamada de "Adicionar à tela inicial") permite que os usuários instalem seu PWA no dispositivo móvel ou desktop. A instalação de um PWA o adiciona para que ele possa ser executado como qualquer outro app instalado.
Além da experiência de instalação fornecida pelo navegador, forneça seu próprio fluxo de instalação personalizado diretamente no app.
Ao considerar se é necessário promover uma instalação, considere como os usuários normalmente
usar seu PWA. Por exemplo, se houver um conjunto de usuários que usam seu PWA
vezes por semana, esses usuários podem se beneficiar da conveniência de
iniciar o app pela tela inicial de um smartphone ou pelo menu "Iniciar" em um computador
operacional principal. Alguns aplicativos de produtividade e entretenimento
do espaço extra na tela criado ao remover as barras de ferramentas do navegador do
Janela nos modos standalone ou minimal-ui instalados.
Pré-requisitos
Antes de começar, verifique se o PWA atende às requisitos de instalação, que normalmente incluem ter um manifesto de app da Web.
Promover a instalação
Para mostrar que seu App Web Progressivo pode ser instalado e oferecer uma interface fluxo de instalação no app:
- Ouça o evento
beforeinstallprompt. - Salve o evento
beforeinstallpromptpara que ele acione o fluxo de instalação. mais tarde. - Alerte o usuário de que o PWA pode ser instalado e forneça um botão ou outro para iniciar o fluxo de instalação no app.
Ouvir o evento beforeinstallprompt
Se o Progressive Web App atender aos critérios de instalação exigidos,
o navegador disparar um evento beforeinstallprompt. Salve uma referência ao evento.
e atualize a interface do usuário para indicar que ele pode instalar o PWA.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Fluxo de instalação no app
Para oferecer uma instalação no app, forneça um botão ou outro elemento de interface
em que um usuário pode clicar ou tocar para instalar seu app. Quando o elemento é clicado ou
tocar, chame prompt() no evento beforeinstallprompt salvo (armazenado no
deferredPrompt). Ele mostra ao usuário uma caixa de diálogo de instalação modal, perguntando
e confirme que quer instalar o PWA.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
A propriedade userChoice é uma promessa que se resolve com a escolha do usuário.
Só é possível chamar prompt() uma vez no evento adiado. Se o usuário
dispensar, você terá que esperar até que o evento beforeinstallprompt
disparar de novo, normalmente imediatamente após a propriedade userChoice.
já resolveu.
Detectar quando o PWA foi instalado
É possível usar a propriedade userChoice para determinar se o usuário instalou
seu app de dentro da sua interface do usuário. Mas, se o usuário instalar o PWA
na barra de endereço ou em outro componente do navegador, o userChoice não ajudará.
Em vez disso, detecte o evento appinstalled, que é disparado sempre que
seu PWA está instalado, independentemente do mecanismo usado para instalá-lo.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Detectar como o PWA foi iniciado
A consulta de mídia CSS display-mode indica como o PWA foi iniciado, seja em
em uma guia do navegador ou como um PWA instalado. Isso permite aplicar diferentes
dependendo de como o app foi iniciado. Por exemplo, é possível configurá-lo
para sempre ocultar o botão de instalação e fornecer um botão "Voltar" quando iniciado como um
PWA instalado.
Acompanhar como o PWA foi lançado
Para rastrear como os usuários iniciam seu PWA, use matchMedia() para testar o
display-mode consulta de mídia. O Safari do iOS ainda não é compatível com essa função. Você deve
Em vez disso, verifique navigator.standalone, que retorna um booleano indicando se
O navegador está em execução no modo independente.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Monitorar quando o modo de exibição muda
Para rastrear se o usuário muda entre standalone e browser tab, detecte
mudanças na consulta de mídia display-mode.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Atualizar a interface com base no modo de exibição atual
Para aplicar uma cor de plano de fundo diferente a um PWA quando iniciado como instalado PWA, use CSS condicional:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Atualizar o ícone e o nome do app
E se você precisar atualizar o nome do app ou fornecer novos ícones? Consulte Como o Chrome lida com atualizações no manifesto de apps da Web. para saber quando e como essas alterações serão refletidas no Google Chrome.