No Chrome 76, você pode ocultar a minibarra de informações "Adicionar à tela inicial"

Penny McLachlan
Penny McLachlan
X GitHub

Contexto sobre os Progressive Web Apps e a minibarra de informações

Os Progressive Web Apps (PWA) são um padrão para criar sites semelhantes a apps, de carregamento instantâneo, confiáveis e instaláveis.

Quando o PWA for aprovado na lista de verificação de instalação no Android, uma caixa de diálogo do sistema do Chrome chamada minibarra de informações será exibida na parte inferior da janela do navegador.

Hoje, a minibarra de informações "Adicionar à tela inicial" é mostrada ao mesmo tempo que o evento beforeinstallprompt.

Alterações no Chrome 76

Ouvimos nossa comunidade e recebemos que os desenvolvedores querem ter mais controle sobre quando pedir aos usuários para instalar um PWA. Você pediu e nós ouvimos!

A partir do Chrome 76, é possível impedir a minibarra de informações chamando preventDefault() no evento beforeinstallprompt.

O evento beforeinstallprompt pode ajudar a promover a instalação do seu Progressive Web App, facilitando para os usuários a adição dele à tela inicial. Nossa comunidade informou que os usuários que instalam um PWA na tela inicial são altamente engajados, com mais visitas repetidas, tempo gasto no app e, quando aplicável, taxas de conversão mais altas.

Exemplo de Pinterest usando um banner de instalação para promover a instalação do PWA.
Exemplo do Pinterest usando um banner de instalação para promover a instalação do PWA. Consulte Adicionar à tela inicial para ver detalhes completos sobre o fluxo de adicionar à tela inicial, incluindo exemplos de código e outras práticas recomendadas.

Para promover seu app da Web sem a minibarra de informações, ouça o evento beforeinstallprompt e, em seguida, salve. Em seguida, atualize a interface do usuário para indicar que o PWA pode ser instalado, por exemplo, adicionando um botão de instalação, mostrando um banner de instalação, usando promoções In-feed ou uma opção de menu. Quando o usuário clicar no elemento de instalação, chame prompt() no evento beforeinstallprompt salvo para mostrar a caixa de diálogo modal "Adicionar à tela inicial".

O futuro da minibarra de informações "Adicionar à tela inicial"

O uso da barra de informações "Adicionar à tela inicial" ainda é uma medida temporária. Estamos testando novos padrões de interface que continuarão a oferecer aos usuários do Progressive Web App a capacidade de instalação, de uma forma que reduza a desorganização na experiência de navegação.