O que é necessário para a instalação?

Pete LePage

Os Progressive Web Apps (PWAs) são aplicativos modernos e de alta qualidade criados com tecnologia da Web. Os PWAs oferecem recursos semelhantes aos apps para dispositivos móveis e computadores, são confiáveis mesmo em condições de rede instáveis e podem ser instalados, facilitando a localização e o uso pelos usuários.

A maioria dos usuários está familiarizada com a instalação de aplicativos e os benefícios de uma experiência instalada. Os aplicativos instalados aparecem em superfícies de inicialização do sistema operacional, como a pasta "Aplicativos" no macOS X, o menu "Iniciar" no Windows e a tela inicial no Android e iOS. Os aplicativos instalados também aparecem no alternador de atividades, nos mecanismos de pesquisa do dispositivo, como Spotlight, e nas páginas de compartilhamento de conteúdo.

A maioria dos navegadores indica ao usuário que seu App Web Progressivo (PWA) pode ser instalado quando ele atende a determinados critérios. Por exemplo, um botão "Instalar" na barra de endereço ou um item "Instalar" no menu de excesso.

Promoção de instalação fornecida pelo navegador (computador)
Promoção de instalação fornecida pelo navegador (dispositivo móvel)

Além disso, quando os critérios são atendidos, muitos navegadores acionam um evento beforeinstallprompt, permitindo que você ofereça uma UX personalizada no app que aciona o fluxo de instalação no app.

Critérios de instalação

No Chrome, seu Progressive Web App precisa atender aos seguintes critérios antes de acionar o evento beforeinstallprompt e mostrar a promoção de instalação no navegador:

  • O app da Web ainda não está instalado.
  • Atende às heurísticas de engajamento do usuário:
    • O usuário precisa ter clicado ou tocado na página pelo menos uma vez, a qualquer momento, mesmo durante um carregamento de página anterior.
    • O usuário precisa ter passado pelo menos 30 segundos visualizando a página, a qualquer momento.
  • Ser veiculado por HTTPS.
  • Inclui um manifesto de web app que inclui:
    • short_name ou name
    • icons: precisa incluir um ícone de 192 px e outro de 512 px
    • start_url
    • display: precisa ser um dos seguintes: fullscreen, standalone, minimal-ui ou window-controls-overlay
    • prefer_related_applications não pode estar presente ou precisa ser false

Outros navegadores têm critérios semelhantes para instalação, mas pode haver pequenas diferenças. Confira os detalhes completos nos respectivos sites: