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)
Nada de frameworks, nada de backend, nada de banco externo.

📁 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>
O link para o manifest.json já prepara o app para instalação.

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");
}
Feche o navegador, reabra o app — os dados continuam lá 🤯

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"
    }
  ]
}
O display: standalone faz o app abrir sem barra do navegador.

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" ]); }) ); });
Agora o app funciona mesmo sem internet.

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 🤯

Resumo da aula para nunca mais esquecer

  • PWA é HTML + CSS + JS + boas práticas
  • Você não precisa de backend para começar
  • Manifest habilita instalação
  • Service Worker habilita offline
  • Você já sabe criar apps instaláveis

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

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.