PWA de Exemplo 02
Além de contar com a notificação de instalação padrão do navegador, é possível criar nossa própria notificação de instalação, através do evento beforeinstallprompt.
A ideia por detrás desse evento é que nós podemos armazenar a notificação, e chamá-la em um momento futuro, por exemplo, quando o usuário clicar em um botão da nossa página.
Só devemos ter o cuidado de não mostrar nossa UI de instalação antes do navegador executar o evento!
Além disso, devemos ter mais um cuidado de ocultar nossa UI de instalação depois de termos exibido a notificação, porque ela é de uso único!
Não precisamos nos preocupar com o fato de esconder nossa UI de instalação, porque é comum o navegador executar o evento beforeinstallprompt mais de uma vez, caso o usuário opte por não instalar o aplicativo 😅.
Mais informações sobre esse assunto podem ser encontradas na MDN e no Google.
Nossa UI de instalação é o botão ao lado (que pode ou não estar visível):
O código-fonte e as explicações podem ser encontradas no GitHub do projeto: github.com/tech-espm/labs-pwa 😊.