Analisador de PWA Online - Teste seu Progressive Web App

Teste e valide seu site para verificar se ele atende aos requisitos de um Progressive Web App (PWA). Nossa ferramenta analisa o Manifest, Service Worker e HTTPS.

O que é um Progressive Web App (PWA)?

Um Progressive Web App (PWA) é uma evolução das páginas web tradicionais. Ele utiliza tecnologias modernas do navegador para oferecer uma experiência de usuário semelhante à de um aplicativo nativo, diretamente da web. Isso significa que seu site pode ser "instalado" na tela inicial do celular, funcionar offline e até mesmo enviar notificações push, tudo sem a necessidade de uma loja de aplicativos.

Por que transformar seu site em um PWA? As Vantagens

  • Engajamento: Com a capacidade de ser instalado e enviar notificações, você pode trazer os usuários de volta ao seu site de forma muito mais eficaz.
  • Confiabilidade: Graças ao Service Worker, seu site pode carregar instantaneamente e funcionar mesmo com conexões de internet ruins ou inexistentes.
  • Performance: PWAs são projetados para serem rápidos e responsivos, melhorando a experiência do usuário e os sinais vitais da web (Core Web Vitals), o que é ótimo para SEO.
  • Instalável: Permite que os usuários adicionem seu site à tela inicial com um toque, tornando o acesso tão fácil quanto abrir um aplicativo nativo.

Entendendo os Pontos da Análise (e Como Corrigi-los)

Nossa ferramenta verifica os pilares de um PWA. Veja o que cada item significa e como resolver problemas comuns:

O que é? O Web App Manifest (`manifest.json`) é o "passaporte" do seu site, informando ao navegador que ele é uma aplicação instalável.
Como Corrigir: Se o manifest não foi encontrado, crie um arquivo chamado `manifest.json` na raiz do seu site e adicione a seguinte linha no `` de todas as suas páginas: 
<link rel="manifest" href="/manifest.json">

O que é? O nome curto que aparecerá sob o ícone do seu app na tela inicial do usuário.
Como Corrigir: Adicione a chave `"short_name"` ao seu arquivo `manifest.json`. 
"short_name": "SeuApp",

O que é? Os ícones usados para a tela inicial (192x192) e a tela de carregamento (512x512). São essenciais para o prompt de instalação.
Como Corrigir: Crie as imagens nos tamanhos corretos e declare-as no `manifest.json` dentro de um array `icons`. 
"icons": [
    { "src": "/caminho/icone-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/caminho/icone-512.png", "type": "image/png", "sizes": "512x512" }
],

O que é? A página que abre quando o usuário clica no ícone do PWA.
Como Corrigir: Defina a URL de início no seu `manifest.json`. Geralmente é a página inicial. 
"start_url": "/",

O que é? Controla a aparência do app, removendo a barra de endereço do navegador para uma experiência imersiva.
Como Corrigir: Adicione a chave `"display"` com o valor `"standalone"` ao seu `manifest.json`. 
"display": "standalone",

O que é? É um script que roda em segundo plano e permite o funcionamento offline, cache e notificações. É o motor do PWA.
Como Corrigir: Crie um arquivo de service worker (ex: `sw.js`) e um script para registrá-lo em suas páginas. Um `sw.js` básico de cache pode ser complexo, mas o registro é feito com o seguinte JavaScript: 
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

Guia Prático: Os 3 Pilares de um PWA

Nossa ferramenta analisa os componentes técnicos essenciais para que um site seja considerado um PWA. Entenda o que cada um faz:

1. Conexão Segura (HTTPS)

O quê: Seu site precisa ser servido sobre HTTPS. Esta é uma exigência de segurança fundamental, pois tecnologias como o Service Worker podem interceptar requisições de rede, e isso só é permitido em um ambiente seguro.

2. Web App Manifest

O quê: É um arquivo JSON simples (geralmente `manifest.json`) que informa ao navegador sobre sua aplicação web e como ela deve se comportar quando 'instalada'. Ele controla o nome do app, os ícones, a tela de abertura, etc.

Exemplo de código para `manifest.json`:

{
  "short_name": "Meu App",
  "name": "O Nome Completo do Meu App",
  "icons": [
    { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "theme_color": "#0d6efd"
}

3. Service Worker

O quê: É um script que seu navegador executa em segundo plano, separado da página web. Ele é a chave para funcionalidades como operação offline, notificações push e sincronização em segundo plano. Um uso comum é para cache, onde ele armazena os arquivos principais do seu site para que ele possa ser aberto mesmo sem internet.