# PWA progressive web app: guia passo a passo > PWA progressive web app é uma aplicação web que usa HTTPS, um arquivo manifest e um service worker para funcionar offline, ser instalável e ter desempenho semelhante ao de apps nativos. A implementação passo a passo começa pela configuração de HTTPS, criação do manifest e registro do service worker. *Net Propaganda · Apps e Software · 14 de setembro de 2026 · Edivar Sampaio Quinteiro* Implementar uma PWA progressive web app exige HTTPS, manifest e service worker. Este guia passo a passo mostra cada etapa, com dicas para evitar erros comuns e um checklist final. Uma PWA progressive web app não é um framework, é um conjunto de recursos que tornam o site instalável e capaz de funcionar offline. O resultado esperado ao final deste guia: uma aplicação web que abre em tela cheia, responde sem rede e aparece na tela inicial do usuário. Antes de começar, verifique se o site já roda em HTTPS (obrigatório para service worker) e se você tem acesso ao servidor ou à hospedagem para publicar arquivos na raiz. ## Passo 1: Sirva o site por HTTPS Sem HTTPS, o navegador bloqueia o registro do service worker. A maioria das hospedagens modernas já oferece certificado gratuito (Let's Encrypt, por exemplo). Confirme se todas as URLs internas usam https:// e se não há recursos mistos (imagens ou scripts carregados via http://). Dica: se o site estiver atrás de CDN, teste o certificado também no domínio final, não apenas na origem. Erro comum: esquecer de redirecionar http:// para https://, o que quebra a instalação silenciosamente. ## Passo 2: Crie o manifest.json O manifest descreve como a PWA aparece quando instalada. Ele precisa de name, short_name, start_url, display (standalone ou fullscreen), background_color, theme_color e ícones em pelo menos dois tamanhos (192x192 e 512x512 pixels). Coloque o arquivo na raiz do site e referencie no com . Dica: use caminhos absolutos para start_url e ícones, evitando que a instalação falhe em subdiretórios. Erro comum: esquecer o atributo purpose nos ícones, o que impede o Android de usar a máscara adaptativa. ## Passo 3: Registre o service worker O service worker é um script que roda em segundo plano e intercepta requisições. Crie um arquivo sw.js na raiz e registre-o no JavaScript principal: if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js'); }); } Dentro do sw.js, implemente um cache básico no evento install e responda com o cache no evento fetch. Dica: versione o nome do cache (ex: 'v1') para forçar atualização quando o conteúdo mudar. Erro comum: tentar cachear tudo na primeira visita, o que atrasa o carregamento. Comece pelos arquivos essenciais (HTML, CSS, JS principal). ## Passo 4: Teste a instalabilidade Abra o Chrome DevTools, vá em Application > Manifest e verifique se não há erros. Na aba Service Workers, confirme se o status é "activated and is running". O navegador só oferece o prompt de instalação se o manifest estiver válido, o service worker ativo e o site em HTTPS. Dica: use o Lighthouse (aba Lighthouse no DevTools) para auditar a PWA. Ele aponta exatamente o que falta. Erro comum: testar apenas em localhost e não perceber que o certificado de produção está inválido. ## Passo 5: Lide com atualizações Quando você publica uma nova versão do sw.js, o navegador instala o novo service worker, mas ele só assume o controle após todas as abas serem fechadas. Para evitar que o usuário fique preso em uma versão antiga, escute o evento 'controllerchange' e recarregue a página, ou exiba um aviso para o usuário atualizar. Dica: mantenha um número de versão no cache e limpe caches antigos no evento activate. Erro comum: ignorar esse ciclo e servir conteúdo desatualizado por dias. ## Checklist rápido - HTTPS ativo e sem recursos mistos. - manifest.json na raiz, com name, short_name, start_url, display, cores e ícones 192 e 512. - Link para o manifest no . - sw.js registrado e ativo. - Cache versionado e estratégia de fetch definida. - Teste no DevTools (Application e Lighthouse) sem erros. - Tratamento de atualização do service worker. ## FAQ ### O que é uma PWA progressive web app? É uma aplicação web que usa recursos como HTTPS, manifest e service worker para se comportar como app nativo: instalável, com ícone na tela inicial e funcionamento offline. Não é uma tecnologia única, mas um conjunto de práticas suportadas por navegadores modernos. ### Qual a diferença entre PWA e app nativo? A PWA roda no navegador e não exige loja de aplicativos para instalação. O app nativo precisa ser baixado de uma loja e tem acesso mais amplo a recursos do sistema. A PWA é mais leve e atualiza automaticamente, mas tem limitações de acesso a hardware em alguns casos. ### Preciso de HTTPS para implementar uma PWA? Sim. O service worker, que é o coração da PWA, só funciona em contextos seguros. HTTPS é obrigatório, exceto em localhost durante o desenvolvimento. Sem ele, o navegador nem registra o script. ### O service worker funciona em todos os navegadores? Navegadores baseados em Chromium (Chrome, Edge, Opera) e Firefox e Safari oferecem suporte, mas com diferenças. O Safari, por exemplo, tem limitações de cache e de notificações push. Teste sempre nos navegadores que seu público usa. ### Como forçar a atualização de uma PWA já instalada? Altere o conteúdo do sw.js (mesmo um comentário) para disparar a instalação de uma nova versão. O navegador baixa o novo arquivo, mas a ativação só ocorre quando não há abas abertas com a versão antiga. Use o evento 'controllerchange' para recarregar a página automaticamente. ### PWA ajuda no SEO? Indiretamente. Uma PWA bem feita melhora a velocidade e a experiência do usuário, fatores que influenciam rankings. Mas o Google não exige PWA para ranquear. O ganho principal está em retenção e engajamento, não em posição na SERP. --- Fonte (canonical): https://netpropaganda.com.br/apps-e-software/pwa-progressive-web-app-guia-passo-a-passo/