Voltar ao dashboard
Guia PWA

Instalar o PWA no seu site

Em 4 passos simples, seu site vira um app instalável no celular e desktop, com ícone na tela inicial e funcionamento offline.

1

Baixar o pacote PWA

Gere e baixe o ZIP com manifest, service worker, ícones e snippet.

  1. Acesse Novo app ou abra um app existente.
  2. Na etapa final, clique em "Baixar PWA (.zip)".
  3. Extraia o ZIP em uma pasta — você terá: manifest.json, sw.js, icons/ e snippet.html.
2

Subir os arquivos para a raiz do site

Os arquivos precisam ficar acessíveis a partir do domínio raiz.

Suba o conteúdo extraído para a raiz pública do seu site (a mesma pasta onde está o index.html):

📁 seu-site.com/
├── index.html
├── manifest.json ← novo
├── sw.js ← novo
└── icons/ ← novo
├── icon-192.png
├── icon-512.png
└── ...

Como subir? Use o painel da sua hospedagem (cPanel, Hostinger, Vercel, Netlify), FTP (FileZilla) ou commit no Git. Acesse depois seu-site.com/manifest.json no navegador — se aparecer o JSON, deu certo.

3

Colar o snippet dentro do <head>

Abra o snippet.html e cole o conteúdo no HTML principal do seu site.

Abra o arquivo index.html (ou o template principal do seu site) e cole o conteúdo de snippet.html dentro da tag <head>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Meu App</title>
 
  <!-- 👇 COLE O CONTEÚDO DE snippet.html AQUI DENTRO 👇 -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#22c55e">
  <link rel="apple-touch-icon" href="/icons/icon-192.png">
  <!-- ...resto do snippet... -->
  <!-- 👆 ATÉ AQUI 👆 -->
 
</head>
<body>
  <div id="root"></div>
</body>
</html>
WordPress

Aparência → Editor de tema → header.php (cole antes de </head>) ou use o plugin 'Insert Headers and Footers'.

React / Next / Vite

Cole no public/index.html dentro do <head>, ou use <Helmet>/<Head> nos componentes.

HTML puro

Abra index.html, cole o conteúdo entre <head> e </head>, salve e suba.

Webflow / Wix / Shopify

Procure por 'Custom Code' nas configurações do site e cole na seção 'Head'.

4

Validar no navegador

Confirme que o PWA está funcionando antes de divulgar para os usuários.

Abra seu site no Chrome (desktop) e siga estes checks:

Abra o site em https:// (PWA não funciona em http puro, exceto localhost).
Pressione F12 → aba 'Application' → 'Manifest' → confirme que aparece nome, ícones e theme color.
Na mesma aba 'Application' → 'Service Workers' → deve aparecer 'sw.js' como activated and is running.
Aperte F12 → 'Lighthouse' → marque 'Progressive Web App' → 'Analyze' → score deve ser verde.
Na barra de endereço, deve aparecer um ícone de instalação (⊕). Clique para instalar.

Android (Chrome)

Abra o site → menu ⋮ → "Instalar app" ou "Adicionar à tela inicial". O ícone aparece como app nativo.

iOS (Safari)

Abra no Safari (não Chrome) → botão Compartilhar → "Adicionar à Tela Inicial".

5

Validar e empacotar com PWA Builder

Use a ferramenta oficial da Microsoft para auditar o PWA e gerar pacotes para Play Store, App Store e Microsoft Store.

O PWA Builder (pwabuilder.com) é a forma mais confiável de validar tudo de uma vez e ainda gerar instaladores nativos.

  1. 1

    Acesse pwabuilder.com↗ abrir

    Cole a URL do seu site no campo grande no centro e clique em 'Start'.

  2. 2

    Veja o relatório de validação

    Aparecem 3 categorias: Manifest, Service Worker e Security. Mire em score 90+. Cada item tem um botão 'Fix' explicando o que ajustar.

  3. 3

    Use o 'Manifest Editor' (opcional)

    Se quiser ajustar campos sem reupar o ZIP, edite ali e baixe um manifest.json novo, substituindo o que está no servidor.

  4. 4

    Gerar pacotes nativos (opcional)

    Clique em 'Package For Stores' → escolha Android (gera .apk + .aab assinados via Bubblewrap), iOS (gera projeto Xcode) ou Windows (.msix).

Vantagem do PWA Builder

Ele valida o que o Lighthouse valida + gera os instaladores das lojas automaticamente. Para Android, o .aab sai pronto para subir na Play Store sem Android Studio.

Abrir PWA Builder

Resolução de problemas

Não está funcionando? Veja os erros mais comuns.

O ícone de instalar não aparece

Verifique: (1) site em HTTPS, (2) manifest.json acessível, (3) sw.js registrado, (4) pelo menos 1 ícone 192x192 e 1 de 512x512.

Manifest dá 404

O arquivo precisa estar na raiz do domínio (ex: meusite.com/manifest.json), não em subpasta. Confirme acessando direto no navegador.

Service worker não registra

Abra Console (F12) e veja o erro. Geralmente é caminho errado do sw.js ou problema de HTTPS/CORS.

Mudei o snippet mas o app continua antigo

O service worker faz cache. Vá em DevTools → Application → Service Workers → 'Unregister' → recarregue (Ctrl+Shift+R).

Pronto para gerar seu PWA?

Criar app PWA agora