Aula 66 — Introdução prática aos Progressive Web Apps (PWA)

Até aqui, você aprendeu a:

• Manipular o DOM
• Trabalhar com eventos
• Persistir dados no navegador
• Fazer aplicações funcionarem offline

Agora vem a grande revelação:

você já sabe tudo o que precisa para criar seu primeiro app instalável.

Nesta aula, vamos criar uma aplicação simples, mas real:

uma Agenda diária de compromissos — instalável como um app.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que torna um app um PWA
• Criar um PWA simples e funcional
• Instalar um app feito em JavaScript
• Usar localStorage em um app instalável
• Ver um app web se comportar como app nativo

O que torna um app um PWA?

Um Progressive Web App não é uma tecnologia nova.

Ele é a combinação de coisas que você já conhece:

• HTML
• CSS
• JavaScript
• Armazenamento local
• Cache

Com apenas três peças extras:

• Manifesto web (manifest.json)
• Service Worker
• HTTPS (ou localhost)

📁 Estrutura do projeto

Vamos usar esta estrutura simples, incluindo agora os ícones necessários para que o aplicativo possa ser instalado:

/agenda-pwa
│
├── index.html
├── style.css
├── app.js
├── sw.js
├── manifest.json
└── icons/
    ├── icon-192.png
    └── icon-512.png

1️⃣ Criando a interface (HTML - index.html)

 
  <!DOCTYPE html> 
  <html lang="pt-BR"> 
  <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Agenda Diária</title>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <h1>📅 Agenda Diária</h1>
  <input id="compromisso" placeholder="Novo compromisso">
  <button id="salvar">Salvar</button>
  <ul id="lista"></ul>
  <script src="app.js"></script>
  </body>
  </html>

2️⃣ Estilo simples (CSS - style.css)

 
  body { font-family: Arial, sans-serif; padding: 20px; }
  button {
    margin-left: 5px;
  }

3️⃣ Lógica da agenda (JavaScript - app.js)

Agora vamos usar tudo que você já sabe:

• Eventos
• DOM
• localStorage

   
// 1️⃣ Código da aplicação (agenda)
const input = document.getElementById("compromisso");
const botao = document.getElementById("salvar");
const lista = document.getElementById("lista");
let compromissos = JSON.parse(localStorage.getItem("agenda")) || [];
function renderizar() {
  lista.innerHTML = "";
  compromissos.forEach(texto => {
    const li = document.createElement("li");
    li.textContent = texto;
    lista.appendChild(li);
  });
}
botao.addEventListener("click", () => {
  if (input.value.trim() === "") return;
  compromissos.push(input.value);
  localStorage.setItem("agenda", JSON.stringify(compromissos));
  input.value = "";
  renderizar();
});

renderizar();

// 2️⃣ Registro do Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js");
}

4️⃣ Criando o manifesto (manifest.json)

Esse arquivo diz ao navegador:

“Isso aqui é um aplicativo.”

{
  "name": "Agenda Diária",
  "short_name": "Agenda",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#428bca",
  "icons": [
    {
      "src": "icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

5️⃣ Service Worker (offline - sw.js)

Agora o passo mágico do offline.

 // sw.js self.addEventListener("install", event => { event.waitUntil( caches.open("agenda-cache").then(cache => { return cache.addAll([ "./", "./index.html", "./style.css", "./app.js" ]); }) ); }); 

6️⃣ Testando e instalando

Abra o app em:

• localhost
• ou servidor HTTPS

No Chrome ou Edge:

• Um botão “Instalar” aparecerá
• Ou opção no menu do navegador

Ao instalar:

• Ícone no desktop
• App no menu iniciar
• Janela própria
• Offline

Tudo isso com JavaScript puro 🤯

Na próxima aula, voltamos ao nosso caminho natural com IndexedDB, entendendo quando o localStorage não é suficiente.