Testando Aplicações Offline-First: Simulando Condições de Rede

Testando Aplicações Offline-First: Simulando Condições de Rede

O que é Testar Offline-First?

Imagine que você está construindo um aplicativo como um carro. Um carro normal só funciona quando está na estrada (conectado à internet). Mas um carro offline-first é como um carro que também pode funcionar em um caminho de terra, sem precisar da estrada principal. Testar offline-first significa verificar se seu aplicativo continua funcionando quando a "estrada" (internet) desaparece.

Quando você testa aplicações offline-first, você simula diferentes cenários de rede: conexão rápida, conexão lenta, sem conexão, ou conexão que desaparece e volta. É como testar seu carro em diferentes condições climáticas antes de vender.

Por Que Isso É Importante?

Usuários reais enfrentam problemas de rede o tempo todo: entram em um túnel, viajam de avião, ou sua conexão Wi-Fi cai. Se seu aplicativo não funciona nesses momentos, os usuários ficarão frustrados. Testar essas situações garante que seu app seja robusto e confiável.

Técnicas Básicas de Simulação

1. Desligar a Rede Completamente

A forma mais simples é desligar a internet. Você pode fazer isso:

• Desconectando seu Wi-Fi ou dados móveis
• Usando ferramentas do navegador para simular offline
• Usando código para detectar quando não há conexão

Aqui está um exemplo básico em JavaScript para detectar se está offline:

// Detectar quando fica offline
window.addEventListener('offline', function() {
  console.log('Você ficou offline!');
  // Mostrar mensagem ao usuário
  showMessage('Sem conexão. Seus dados serão sincronizados depois.');
});

// Detectar quando volta online
window.addEventListener('online', function() {
  console.log('Você está online novamente!');
  // Sincronizar dados pendentes
  syncPendingData();
});

2. Simular Conexão Lenta

Às vezes, a internet não desaparece completamente, mas fica muito lenta. É como dirigir em uma estrada congestionada. Você pode simular isso usando as ferramentas de desenvolvedor do navegador.

No Chrome DevTools:

1. Abra as ferramentas de desenvolvedor (F12)
2. Vá para a aba "Network"
3. Procure por "Throttling" (limitação)
4. Escolha "Slow 3G" ou "Fast 3G"

3. Simular Falhas Intermitentes

Às vezes, a conexão desaparece e volta várias vezes. Você pode criar um simulador simples:

// Simular conexão que cai e volta
class NetworkSimulator {
  constructor() {
    this.isOnline = true;
  }
  
  // Simular queda de rede
  simulateNetworkFailure(durationMs) {
    this.isOnline = false;
    console.log('Rede caiu!');
    
    setTimeout(() => {
      this.isOnline = true;
      console.log('Rede restaurada!');
    }, durationMs);
  }
  
  // Verificar se pode fazer requisição
  canMakeRequest() {
    return this.isOnline;
  }
}

// Usar o simulador
const simulator = new NetworkSimulator();
simulator.simulateNetworkFailure(3000); // Cai por 3 segundos

Ferramentas Úteis

Chrome DevTools: A ferramenta nativa do navegador Chrome permite simular diferentes velocidades de rede e desconexões.

Postman: Se você está testando APIs, o Postman permite simular delays e erros de rede.

Mock Service Workers: Uma biblioteca que intercepta requisições de rede e permite simular respostas, erros e delays.

Checklist de Testes Offline-First

Quando testar seu aplicativo, verifique:

• ✓ O app funciona completamente sem internet?
• ✓ Os dados são salvos localmente quando offline?
• ✓ Os dados são sincronizados quando volta online?
• ✓ O usuário recebe mensagens claras sobre o status da conexão?
• ✓ O app não congela ou trava quando a rede cai?
• ✓ As requisições pendentes são feitas novamente quando volta online?

Exemplo Prático Completo

Aqui está um exemplo simples de um app que funciona offline:

// Salvar dados localmente
function saveDataLocally(data) {
  localStorage.setItem('pendingData', JSON.stringify(data));
  console.log('Dados salvos localmente');
}

// Tentar enviar para servidor
async function sendToServer(data) {
  if (!navigator.onLine) {
    saveDataLocally(data);
    return;
  }
  
  try {
    const response = await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data)
    });
    console.log('Dados enviados com sucesso!');
  } catch (error) {
    saveDataLocally(data);
  }
}

Conclusão

Testar aplicações offline-first é essencial para criar apps que funcionam no mundo real. Comece simples: desconecte sua internet, veja o que quebra, e corrija. Use as ferramentas do navegador para simular conexões lentas. Gradualmente, você construirá aplicações robustas que funcionam em qualquer situação de rede.