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 iOS/Android/computador. Eles são confiáveis até mesmo em condições de rede instáveis e podem ser instalados para que os usuários possam encontrá-los e usá-los com mais facilidade.

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

A maioria dos navegadores indica ao usuário que é possível instalar seu App Web Progressivo (PWA) quando atende a determinados critérios. Exemplos de indicadores incluem um botão "Instalar" na barra de endereço ou um item de menu "Instalar" no menu flutuante.

Captura de tela da omnibox com o indicador de instalação visível.
Promoção de instalação fornecida pelo navegador (computador)
Captura de tela da promoção de instalação fornecida pelo navegador.
Promoção de instalação fornecida pelo navegador (dispositivos móveis)

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

Critérios de instalação

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

  • O app da Web ainda não está instalado
  • Atende à heurística 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 exibido por HTTPS
  • Inclui um manifesto de app da Web que inclui:
    • short_name ou name
    • icons: precisa incluir um ícone de 192 px e 512 px
    • start_url
    • display: precisa ser fullscreen, standalone ou minimal-ui.
    • prefer_related_applications não pode estar presente ou ser false

Outros navegadores têm critérios de instalação semelhantes, embora possa haver pequenas diferenças. Confira os respectivos sites para ver todos os detalhes: