Compatibilidad sin conexión y sincronización en segundo plano
Almacenamiento en caché de respuestas de API, IndexedDB para datos sin conexión y sincronización en segundo plano para acciones aplazadas
Compatibilidad sin conexión y sincronización en segundo plano es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Enfoque offline-first
La verdadera compatibilidad sin conexión significa que la aplicación sigue funcionando sin red: las lecturas proceden de un almacén local y las escrituras se ponen en cola para sincronizarse cuando vuelve la conectividad.
IndexedDB para almacenamiento local
IndexedDB es el almacenamiento estructurado, asíncrono y de gran capacidad del navegador. Su API sin procesar es verbosa, por lo que la mayoría de las aplicaciones utilizan la pequeña biblioteca envoltorio idb.
npm install idbAbrir una base de datos con idb
openDB devuelve un controlador de base de datos basado en promesas. Defina los almacenes de objetos en el callback upgrade.
import { openDB } from "idb";
const db = await openDB("app-db", 1, {
upgrade(db) {
db.createObjectStore("todos", { keyPath: "id" });
db.createObjectStore("outbox", { keyPath: "id", autoIncrement: true });
}
});Leer y escribir
Utilice get, getAll y put para leer y almacenar registros. Devuelven promesas que puede esperar con await.
await db.put("todos", { id: 1, text: "Buy milk" });
const all = await db.getAll("todos");Detectar la conexión con navigator.onLine
navigator.onLine es un booleano que indica la conectividad. Léalo para elegir entre el comportamiento de red y el local.
if (!navigator.onLine) {
// work from IndexedDB only
}Reaccionar a los eventos de conectividad
El objeto window activa los eventos online y offline. Vincúlelos a un ref reactivo para que la interfaz refleje el estado en tiempo real.
import { ref, onMounted, onUnmounted } from "vue";
const online = ref(navigator.onLine);
const on = () => (online.value = true);
const off = () => (online.value = false);
onMounted(() => {
window.addEventListener("online", on);
window.addEventListener("offline", off);
});
onUnmounted(() => {
window.removeEventListener("online", on);
window.removeEventListener("offline", off);
});Poner en cola mutaciones sin conexión
Cuando se produce una escritura sin conexión, almacénela en un almacén outbox en lugar de enviarla. La interfaz se actualiza de forma optimista a partir del estado local.
async function saveTodo(todo) {
await db.put("todos", todo);
if (!navigator.onLine) {
await db.add("outbox", { type: "saveTodo", payload: todo });
} else {
await api.save(todo);
}
}Sincronizar al reconectarse
Cuando se activa el evento online, vacíe el outbox: vuelva a ejecutar cada mutación en cola contra el servidor y después elimínelo.
async function flushOutbox() {
const items = await db.getAll("outbox");
for (const item of items) {
await api.send(item);
await db.delete("outbox", item.id);
}
}
window.addEventListener("online", flushOutbox);La API Background Sync
Para sincronizar incluso después de cerrar la pestaña, la API Background Sync del service worker registra una etiqueta de sincronización que el navegador activa cuando vuelve la conectividad.
const reg = await navigator.serviceWorker.ready;
await reg.sync.register("flush-outbox");Gestionar la sincronización en el worker
El service worker escucha el evento sync y ejecuta la lógica de vaciado en segundo plano.
// service worker
self.addEventListener("sync", (event) => {
if (event.tag === "flush-outbox") {
event.waitUntil(flushOutbox());
}
});Consideraciones sobre conflictos
Reproducir escrituras en cola puede entrar en conflicto con cambios del servidor. Use versiones, marcas de tiempo o reglas de último escritor, y muestre al usuario los conflictos que no se puedan resolver.
Comprobación rápida
¿Cómo deben gestionarse las escrituras mientras la aplicación está sin conexión?
Resumen
La compatibilidad sin conexión almacena datos en IndexedDB (mediante la biblioteca idb), detecta la conectividad con navigator.onLine y los eventos online/offline, pone en cola las mutaciones en una bandeja de salida mientras no hay conexión y las sincroniza al restablecerse la conexión, opcionalmente mediante la API Background Sync del service worker. Planifique cómo resolver los conflictos al reproducir las escrituras en cola.
Preguntas frecuentes
¿La lección «Compatibilidad sin conexión y sincronización en segundo plano» es gratis?
Sí — el texto completo de «Compatibilidad sin conexión y sincronización en segundo plano» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Compatibilidad sin conexión y sincronización en segundo plano»?
Almacenamiento en caché de respuestas de API, IndexedDB para datos sin conexión y sincronización en segundo plano para acciones aplazadas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Compatibilidad sin conexión y sincronización en segundo plano»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de vite-plugin-pwa
- Estrategias de Service Worker
- Compatibilidad sin conexión y sincronización en segundo plano
- Notificaciones push en una PWA de Vue