Local-First Web Apps: Cómo sincronizar datos locales usando LocalStorage e IndexedDB

Durante la última década, la arquitectura de la mayoría de las aplicaciones web ha seguido el modelo tradicional centrado en la nube (Cloud-First): el navegador actúa como un cliente ligero que envía solicitudes HTTP a una API central que lee y escribe en una base de datos del servidor. Si la conexión del usuario falla, la aplicación queda totalmente inutilizable.

El movimiento Local-First cambia este paradigma. En una aplicación Local-First, los datos del usuario pertenecen principalmente a su propio dispositivo. La nube deja de ser la única fuente de verdad y pasa a ser un canal secundario de sincronización, respaldo y colaboración. Esto asegura que la aplicación funcione offline sin problemas, responda al instante y cuide la privacidad.

LocalStorage vs IndexedDB: Elegir el motor de almacenamiento adecuado

Para persistir información en el navegador del usuario, disponemos de dos APIs nativas principales. La elección dependerá de la estructura de sus datos:

LocalStorage

LocalStorage es un almacén de clave-valor sencillo. Sus características principales son:

• API síncrona: Muy fácil de usar, pero puede bloquear el hilo principal durante operaciones pesadas de escritura.
• Capacidad limitada: Generalmente limitado a unos 5 MB por dominio.
• Solo cadenas de texto: Requiere serialización continua mediante JSON.stringify() y JSON.parse().
• Ideal para: Preferencias de interfaz (modo oscuro/claro), configuraciones menores o marcadores (favoritos).

IndexedDB

IndexedDB es una base de datos NoSQL transaccional y orientada a objetos integrada directamente en el navegador. Características principales:

• API asíncrona: Funciona mediante controladores de eventos (o promesas con librerías como idb), lo que evita bloqueos en la interfaz gráfica.
• Consultas estructuradas: Admite múltiples almacenes de objetos, índices secundarios y consultas avanzadas de rangos.
• Gran capacidad: Permite almacenar gigabytes de datos, escalando según el espacio libre en el disco del dispositivo.
• Ideal para: Registro de transacciones financieras, tableros Kanban, editores de texto offline y aplicaciones con conjuntos de datos complejos.

Comparativa directa de las APIs

El siguiente cuadro resume las diferencias entre las dos opciones de almacenamiento local:

Estrategias de sincronización offline-first

El desafío principal del desarrollo Local-First radica en sincronizar la información y resolver conflictos cuando se restablece la conexión. Para estructurar esto con éxito, divida la lógica del cliente en tres niveles:

1. Control de versiones del esquema

A medida que actualiza su aplicación, los datos almacenados localmente en los navegadores de los usuarios eventualmente quedarán desactualizados. Asegúrese de incluir una clave de versión (por ejemplo, version: 1) en sus esquemas de datos o use el sistema nativo de versionado de IndexedDB para ejecutar funciones de migración sin eliminar el historial de los visitantes.

2. Historial de mutaciones (Changelog)

En lugar de enviar todo el estado del cliente en cada sincronización, registre localmente las operaciones individuales (mutaciones). Cada registro contiene una marca de tiempo, tipo de operación, payload y un estado que indica si ya ha sido sincronizado:

interface Mutation {
  id: string;
  type: 'insert' | 'update' | 'delete';
  entity: 'transaction' | 'task';
  payload: any;
  timestamp: number;
  synced: boolean;
}

3. Flujos de importación y exportación de respaldo (Backup manual)

Dado que los datos se almacenan localmente, limpiar el historial del navegador o cambiar de dispositivo puede provocar pérdidas de información. Ofrezca siempre un botón de **Respaldo Manual** que permita exportar la base de datos local en un archivo JSON descargable y facilite la importación de este archivo en otro navegador.

Ejemplo práctico: Escritura en IndexedDB

A continuación, se detalla cómo abrir e insertar datos de forma sencilla utilizando la librería basada en promesas idb:

import { openDB } from 'idb';

async function saveTask(task) {
  const db = await openDB('MyAppDatabase', 1, {
    upgrade(db) {
      db.createObjectStore('tasks', { keyPath: 'id' });
    },
  });
  
  await db.put('tasks', task);
  console.log('¡Tarea guardada exitosamente en la base de datos IndexedDB local!');
}

Conclusión

Desarrollar aplicaciones Local-First requiere un cambio de perspectiva en el desarrollo web. Al priorizar motores de almacenamiento local como IndexedDB e implementar sistemas de respaldo en formato JSON, puede ofrecer una experiencia extremadamente veloz, privada y resistente a caídas de red, minimizando los costos de servidores.