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?

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.