Módulo 14: Offline e Cache (PWA)

2. Resumo da Aula Anterior

No módulo passado, aprendeste sobre Web Components e como criar as tuas próprias tags reutilizáveis. Agora, vamos elevar o nível e aprender como fazer com que o teu site continue a funcionar mesmo que o utilizador perca o sinal de internet!

3. O Que Vais Aprender Hoje

✅ O que é uma PWA (Progressive Web App).
✅ Como configurar o manifest.json para instalação.
✅ O básico dos Service Workers.
✅ Estratégias de Cache: guardar o site no bolso do utilizador.

4. Teoria: O Site que não Desiste

Conceito: Progressive Web Apps (PWA) são sites que usam tecnologias modernas para oferecer uma experiência igual à de um aplicativo instalado, incluindo funcionamento offline e ícone no ecrã inicial.

📻 Analogia: O Rádio a Pilhas

Imagina que estás a ouvir música:

Site Normal: É como uma televisão ligada à ficha. Se falta a luz (internet), a imagem desaparece imediatamente.
PWA: É como um rádio a pilhas. Mesmo que a luz falte, ele continua a funcionar porque tem a sua própria reserva (o Cache).
Manifest: É a etiqueta do rádio que diz a marca, a cor e onde fica o botão de ligar.
Service Worker: É o pequeno técnico dentro do rádio que decide "Vou buscar a música à antena (net) ou vou tocar a cassete (cache)?".

5. Exemplos Práticos

Exemplo 1: O Bilhete de Identidade (manifest.json)

Define como o site aparece no telemóvel.

{
  "name": "Meu Super App",
  "short_name": "App",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

O display: standalone faz com que o site abra sem a barra de endereço do browser, parecendo uma app real.

Exemplo 2: Registar o Técnico (Service Worker)

Código para ativar o funcionamento em segundo plano.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log("Service Worker Ativo!"))
    .catch(err => console.log("Erro ao registar:", err));
}

Este código deve ser colocado no teu ficheiro JavaScript principal.

Exemplo 3: Linkar o Manifest

Adiciona isto ao <head> do teu HTML.

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#317EFB">

A tag theme-color muda a cor da barra do sistema no telemóvel.

6. Agora é a Tua Vez!

Vamos preparar o teu projeto para ser instalável:

Cria um ficheiro chamado manifest.json na pasta raiz.
Preenche o nome do teu projeto e escolhe uma cor de fundo.
No teu index.html, adiciona o link para o manifest.
Adiciona o código de registo do Service Worker no fim do teu main.js.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Uma PWA é um site que se comporta como uma app.
📌 O manifest.json controla a aparência visual da app instalada.
📌 O Service Worker é o script que permite interceptar pedidos e trabalhar offline.
📌 A Cache API guarda os ficheiros no dispositivo para acesso instantâneo.

9. Desafios Práticos

Desafio 1: O Requisito HTTPS

Podes instalar uma PWA num site que usa apenas HTTP (sem o S de segurança)?

Desafio 2: O Desaparecido

Criaste o manifesto e o service worker, mas o Chrome ainda não mostra o botão de "Instalar". O que pode faltar?

Desafio 3: Standalone vs Browser

Se mudares o display para browser no manifest, o que acontece?