Progressive Web Apps (PWAs)

Visão Geral

Um Progressive Web App é um aplicativo web que usa recursos modernos do navegador para oferecer uma experiência rápida, confiável e instalável — mesmo em redes instáveis. Os três pilares obrigatórios são:

1. HTTPS — Necessário em produção para que os service workers possam se registrar (localhost é isento para desenvolvimento).
2. Web App Manifest (manifest.json) — Torna o aplicativo instalável e define sua aparência nas telas iniciais do dispositivo.
3. Service Worker (sw.js) — Um script em segundo plano que intercepta requisições de rede, gerencia caches e habilita funcionalidades offline.

Quando Usar Esta Habilidade

• Use quando o usuário quiser que seu aplicativo web funcione offline ou em redes instáveis.
• Use ao construir um projeto web mobile-first onde os usuários devem poder instalar o aplicativo em sua tela inicial.
• Use quando o usuário perguntar sobre estratégias de cache, service workers ou como melhorar o desempenho e a resiliência de um aplicativo web.
• Use quando o usuário mencionar Workbox, web app manifests, sincronização em segundo plano (background sync) ou notificações push para a web.
• Use quando o usuário perguntar "meu site pode ser instalado como um aplicativo?" ou "como faço meu site funcionar offline?" — mesmo que não use a palavra PWA.

Checklist de Entregas

Toda implementação de PWA deve incluir, no mínimo, estes arquivos:

• index.html — Vincula o manifest, registra o service worker
• manifest.json — Metadados completos do aplicativo e conjunto de ícones
• sw.js — Service worker com manipuladores de install, activate e fetch
• app.js — Lógica principal do aplicativo com registro do SW e tratamento do prompt de instalação
• offline.html — Página de fallback exibida quando a navegação falha offline (obrigatório — arquivo ausente causará falha na instalação)

Passo 1: Web App Manifest (manifest.json)

Define como o aplicativo aparece quando instalado. Deve ser vinculado a partir de <head> via <link rel="manifest">.

{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "description": "A fast, offline-capable Progressive Web App.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#ffffff",
  "theme_color": "#0055ff",
  "icons": [
    {
      "src": "/assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/assets/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}

Campos principais:

• display: standalone oculta a interface do navegador; minimal-ui mostra controles mínimos; browser é a aba padrão.
• purpose: "maskable" em ícones habilita ícones adaptáveis no Android (a zona segura é importante — mantenha o conteúdo na área central de 80%).
• screenshots é opcional, mas necessário para o diálogo de instalação aprimorado do Chrome no desktop.

Passo 2: Shell HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome PWA</title>

  <!-- PWA manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- Theme color for browser chrome -->
  <meta name="theme-color" content="#0055ff">

  <!-- iOS-specific (Safari doesn't fully use manifest) -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="MyPWA">
  <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">

  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div id="app">
    <header><h1>My PWA</h1></header>
    <main id="content">Loading...</main>
    <!-- Optional: install button, hidden by default -->
    <button id="install-btn" hidden>Install App</button>
  </div>
  <script src="/app.js"></script>
</body>
</html>

Passo 3: Registro do Service Worker e Prompt de Instalação (app.js)

// ─── Registro do Service Worker ───────────────────────────────────────────
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('[App] SW registrado, escopo:', registration.scope);
    } catch (err) {
      console.error('[App] Falha no registro do SW:', err);
    }
  });
}


…