Guia de PWA (Progressive Web Apps): Fazendo Apps Web Funcionarem como Apps Móveis

O que é uma PWA?

PWA (Progressive Web Apps) são aplicações web construídas com tecnologias web que proporcionam uma experiência de app móvel nativa.

PWA usam tecnologias web modernas como Service Worker, Web App Manifest e HTTPS. Funcionam em qualquer navegador e não requerem app store.

Funcionalidades-chave: Funcionalidade offline, Adicionar à tela inicial, notificações push, sincronização em segundo plano, modo tela cheia.

Vantagens: Um único código base (web + mobile), não requer aprovação de app store, atualizações instantâneas, menor custo de desenvolvimento, SEO friendly.

Web App Manifest

O arquivo manifest.json define os metadados da PWA: name, short_name, start_url, display, background_color, theme_color, icons.

Exemplo de manifest: { "name": "Utilgo", "short_name": "Utilgo", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4a90d9", "icons": [{"src": "/icon-192.png", "sizes": "192x192"}] }.

display: standalone permite que o app funcione sem UI do navegador (barra de endereço, navegação). As opções fullscreen e minimal-ui também estão disponíveis.

Ícones: Pelo menos ícones PNG de 192x192 e 512x512 pixels são necessários. O suporte a ícones maskable cria ícones adaptativos.

Vincule o manifest em <head> com <link rel="manifest" href="/manifest.json">. O navegador lê o manifest para habilitar as funcionalidades PWA.

Service Worker

Service Worker é um arquivo JavaScript que executa entre o navegador e a rede. Funciona em segundo plano e fornece acesso offline, cache e notificações push.

Registro: Service Worker é registrado com navigator.serviceWorker.register('/sw.js'). Deve executar em HTTPS ou localhost.

Estratégias de cache: Cache First (primeiro cache, depois rede), Network First (primeiro rede, depois cache), Stale While Revalidate (servir do cache, atualizar em segundo plano).

Cache API: Assets estáticos são cacheados com caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js'])).

Fallback offline: Mostre uma página personalizada quando offline. self.addEventListener('fetch', (e) => { e.respondWith(caches.match(e.request).then(r => r || fetch(e.request))); });

Requisitos de PWA e Lighthouse

HTTPS: PWA devem executar em HTTPS (exceto localhost). Certificado SSL é necessário.

Design responsivo: Como PWA executa em dispositivos móveis, o design responsivo é obrigatório. Adicione meta tag viewport.

Carregamento rápido: O carregamento inicial deve ser inferior a 3 segundos. Acelere com code splitting, lazy loading e cache.

Auditoria PWA do Lighthouse: Execute a auditoria PWA na aba Lighthouse do Chrome DevTools. Verifica todos os critérios de PWA (instalável, funciona offline, carregamento rápido).

Instalabilidade: O navegador mostra automaticamente o botão 'Adicionar à tela inicial' quando as condições de manifest e Service Worker são atendidas.

PWA vs App Nativo

Vantagens de PWA: Um único código base, atualizações instantâneas, não requer app store, SEO friendly, menor custo, tamanho pequeno.

Vantagens de app nativo: Acesso completo ao hardware (câmera, Bluetooth, NFC), melhor desempenho, visibilidade em app store, confiabilidade de notificações push.

Critérios de seleção: PWA se o orçamento é limitado e é necessário lançamento rápido. App nativo se é necessário acesso completo ao hardware e máximo desempenho.

Abordagem híbrida: Comece com PWA, mude para app nativo quando a base de usuários crescer. Ou converta PWA em app nativo com Capacitor/Ionic.

Exemplos de PWA e Ferramentas

Exemplos de PWA de sucesso: Twitter Lite (65% menos dados), Pinterest (44% mais engajamento de usuários), Starbucks (pedidos offline).

Ferramentas de desenvolvimento: Workbox (biblioteca de Service Worker do Google), PWA Builder (Microsoft), Lighthouse (auditoria), Chrome DevTools (debugging).

Suporte de frameworks: Next.js (next-pwa), Nuxt.js (@nuxtjs/pwa), React (Create React App PWA template), Vue (Vue CLI PWA plugin).

Testes: Verifique Service Worker, Cache e Manifest na aba Application do Chrome DevTools. Meça o score de PWA com Lighthouse.