{"id":1547,"date":"2024-09-17T15:39:21","date_gmt":"2024-09-17T18:39:21","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1547"},"modified":"2025-11-26T12:52:27","modified_gmt":"2025-11-26T15:52:27","slug":"instalando-um-pwa","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/instalando-um-pwa\/","title":{"rendered":"Instalando um PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Instalando um PWA<\/strong>: A capacidade de instala\u00e7\u00e3o<\/strong> (installability<\/em>) \u00e9 o que finalmente eleva um Progressive Web App (PWA) de um website avan\u00e7ado para uma experi\u00eancia de aplicativo. Ao serem instalados, os PWAs ganham um \u00edcone na tela inicial (ou na \u00e1rea de trabalho) e podem ser iniciados em um modo standalone<\/code><\/strong> (tela cheia, sem a barra de endere\u00e7o do navegador).<\/p>\n\n\n\n

Entender os crit\u00e9rios e as particularidades de cada plataforma (Desktop, Android e iOS) \u00e9 crucial para garantir que seu PWA seja eleg\u00edvel e que o usu\u00e1rio consiga concluir a instala\u00e7\u00e3o.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \u2705 Crit\u00e9rios de Elegibilidade (O Checklist do Navegador)<\/h2>\n\n\n\n

Para que um navegador (como Chrome, Edge ou Safari) exiba o prompt<\/em> de instala\u00e7\u00e3o, o PWA precisa satisfazer a uma s\u00e9rie de requisitos t\u00e9cnicos, que garantem uma experi\u00eancia m\u00ednima de aplicativo:<\/p>\n\n\n\n

Crit\u00e9rio<\/strong><\/td>Objetivo<\/strong><\/td>Componente Necess\u00e1rio<\/strong><\/td><\/tr><\/thead>
Seguran\u00e7a<\/strong><\/td>Proteger os dados e permitir o registro do Service Worker.<\/td>HTTPS<\/strong> (obrigat\u00f3rio).<\/td><\/tr>
Metadados<\/strong><\/td>Definir \u00edcones, nome, tema e modo de exibi\u00e7\u00e3o.<\/td>Web App Manifest<\/strong> com campos essenciais (name<\/code>, short_name<\/code>, icons<\/code>, start_url<\/code>, display: standalone<\/code>).<\/td><\/tr>
Confiabilidade<\/strong><\/td>Garantir o funcionamento offline<\/em> e o carregamento r\u00e1pido.<\/td>Service Worker<\/strong> registrado, com o evento fetch<\/code> configurado para servir, no m\u00ednimo, a p\u00e1gina de start_url<\/em> (o App Shell).<\/td><\/tr>
UX M\u00ednima<\/strong><\/td>A aplica\u00e7\u00e3o deve ser responsiva<\/strong> e ter conte\u00fado suficiente.<\/td>viewport<\/code> configurado e conte\u00fado que passa no teste de usabilidade.<\/td><\/tr>
Engajamento<\/strong><\/td>Indicadores de que o usu\u00e1rio interage com o PWA (principalmente no Chrome).<\/td>A\u00e7\u00f5es do usu\u00e1rio como visitas repetidas ou tempo de sess\u00e3o m\u00ednimo.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

2. \ud83d\udda5\ufe0f Instala\u00e7\u00e3o em Desktop (Experi\u00eancia Consistente)<\/h2>\n\n\n\n

A experi\u00eancia de instala\u00e7\u00e3o em sistemas operacionais desktop (Windows, macOS, Linux) via navegadores baseados no Chromium (Chrome, Edge) \u00e9 a mais uniforme e direta.<\/p>\n\n\n\n

    \n
  1. Detec\u00e7\u00e3o:<\/strong> O navegador detecta o Service Worker e o Manifest v\u00e1lidos.<\/li>\n\n\n\n
  2. Prompt:<\/strong> Um pequeno \u00edcone de “Instalar” aparece na barra de endere\u00e7o (Omnibox).<\/li>\n\n\n\n
  3. Instala\u00e7\u00e3o:<\/strong> O usu\u00e1rio clica no \u00edcone e, em seguida, em “Instalar”.<\/li>\n\n\n\n
  4. Resultado:<\/strong> O PWA \u00e9 adicionado como um aplicativo separado (sem browser chrome<\/em>), com um atalho no Menu Iniciar\/Dock.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    3. \ud83e\udd16 Instala\u00e7\u00e3o em Android (Suporte Nativo Robusto)<\/h2>\n\n\n\n

    O suporte do Google (Chrome para Android) \u00e9 o mais completo, tratando PWAs de forma quase indistingu\u00edvel de aplicativos nativos.<\/p>\n\n\n\n