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?

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.

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.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando 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.

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.