Construindo Seu Primeiro App de Tarefas Offline-Ready

Construindo Seu Primeiro App de Tarefas Offline-Ready

Imagine um caderno de anotações que funciona perfeitamente se você estiver em um avião, em um túnel, ou em qualquer lugar sem internet. Esse é o conceito de offline-first: seu aplicativo trabalha primeiro com dados locais no seu dispositivo, e sincroniza com a nuvem quando a conexão volta.

O Que É Offline-First?

Pense em dois cenários:

• Aplicativo tradicional: Você digita uma tarefa → envia para o servidor → servidor salva → você vê confirmação. Se não há internet, nada funciona.
• Aplicativo offline-first: Você digita uma tarefa → salva imediatamente no seu dispositivo → quando internet volta, sincroniza automaticamente.

É como ter um rascunho no seu caderno que depois você passa a limpo em casa. O rascunho já está seguro!

Os Três Pilares do Nosso App

1. Armazenamento Local (Local Storage)
Guardamos as tarefas no próprio navegador ou dispositivo, não dependendo da internet.

2. Sincronização Inteligente
Quando a conexão volta, enviamos os dados para o servidor sem perder nada.

3. Interface Responsiva
O usuário vê tudo funcionando normalmente, online ou offline.

Estrutura Básica do App

Vamos criar um app simples com três partes:

// Estrutura de uma tarefa
const tarefa = {
  id: 1,
  titulo: "Estudar offline-first",
  concluida: false,
  dataCriacao: new Date(),
  sincronizada: false
};

Cada tarefa tem um campo sincronizada que rastreia se já foi enviada ao servidor. Isso é crucial!

Salvando Dados Localmente

Usamos o localStorage do navegador, que é como um pequeno banco de dados no seu computador:

// Salvar tarefas no localStorage
function salvarTarefasLocalmente(tarefas) {
  localStorage.setItem('tarefas', JSON.stringify(tarefas));
}

// Recuperar tarefas do localStorage
function carregarTarefasLocalmente() {
  const dados = localStorage.getItem('tarefas');
  return dados ? JSON.parse(dados) : [];
}

Pense no localStorage como uma gaveta no seu computador. Você coloca dados lá, fecha a gaveta, e eles ficam seguros mesmo se você desligar o navegador.

Adicionando uma Nova Tarefa

Quando o usuário cria uma tarefa, salvamos localmente primeiro:

function adicionarTarefa(titulo) {
  const tarefas = carregarTarefasLocalmente();
  
  const novaTarefa = {
    id: Date.now(),
    titulo: titulo,
    concluida: false,
    sincronizada: false
  };
  
  tarefas.push(novaTarefa);
  salvarTarefasLocalmente(tarefas);
  
  // Tenta sincronizar se estiver online
  if (navigator.onLine) {
    sincronizarComServidor(novaTarefa);
  }
}

Note o navigator.onLine: é como perguntar "Ei, temos internet agora?". Se sim, sincronizamos. Se não, a tarefa fica esperando.

Sincronização com o Servidor

Quando a conexão volta, enviamos as tarefas não sincronizadas:

function sincronizarComServidor(tarefa) {
  fetch('/api/tarefas', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(tarefa)
  })
  .then(resposta => {
    if (resposta.ok) {
      // Marca como sincronizada
      tarefa.sincronizada = true;
      salvarTarefasLocalmente(carregarTarefasLocalmente());
    }
  })
  .catch(erro => console.log('Offline - tentaremos depois'));
}

Se o envio falhar (sem internet), a tarefa continua marcada como não sincronizada e tentaremos novamente depois.

Detectando Mudanças de Conexão

Podemos ouvir quando a internet volta:

window.addEventListener('online', () => {
  console.log('Voltou a internet! Sincronizando...');
  const tarefas = carregarTarefasLocalmente();
  const naoSincronizadas = tarefas.filter(t => !t.sincronizada);
  naoSincronizadas.forEach(sincronizarComServidor);
});

É como ter um vigia que avisa quando a conexão volta, para que você possa enviar tudo que estava pendente.

Resumo da Arquitetura

O fluxo é simples:

1. Usuário cria tarefa → salva localmente imediatamente
2. Se online → tenta sincronizar com servidor
3. Se offline → espera pacientemente no localStorage
4. Quando internet volta → sincroniza automaticamente
5. Usuário nunca perde dados

Próximos Passos

Com essa base, você pode adicionar:

• Edição de tarefas (marcar como concluída)
• Exclusão com sincronização
• Conflitos (e se você editar a mesma tarefa em dois lugares?)
• Banco de dados mais robusto (IndexedDB em vez de localStorage)

Parabéns! Você agora entende os fundamentos de um app offline-first. O segredo é sempre salvar localmente primeiro, depois sincronizar quando possível.