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?

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.

Nintendo Wii

Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

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.