Entendiendo el Modo Sin Conexión y Caché
Cómo funciona LobbyFlight sin conexión y cómo el caché asegura la visualización continua
Entendiendo el Modo Sin Conexión y Caché
LobbyFlight está diseñado para operación 24/7 en lobbies de hoteles. El sistema de caché inteligente asegura que tu pantalla continúe mostrando información de vuelos incluso durante interrupciones de red.
Cómo Funciona el Modo Sin Conexión
Arquitectura del Service Worker
LobbyFlight utiliza un Service Worker - una tecnología JavaScript que se ejecuta en segundo plano y gestiona el almacenamiento en caché.
Beneficios:
¿Qué se Almacena en Caché?
| Contenido | Duración de Almacenamiento | Frecuencia de Actualización |
| ----------- | --------------------------- | ----------------------------- |
| Archivos de la app (HTML, CSS, JS) | Hasta actualización | En cada lanzamiento |
|---|---|---|
| Datos de vuelos | 6 horas | Cada 5 minutos |
| Datos del clima | 2 horas | Cada 30 minutos |
| Logo e imágenes | Ilimitado | Al cambiar |
| Configuración | 24 horas | Al cambiar |
Comportamiento Sin Conexión
Cuando se Pierde Internet
- El Service Worker intercepta las solicitudes
- Se entregan los datos en caché
- El usuario no nota nada
- Aparece barra de estado naranja: "Modo sin conexión"
- Los datos de vuelos en caché continúan mostrándose
- Se muestra la hora de última actualización
- Aparece advertencia: "Los datos pueden estar desactualizados"
- La pantalla continúa funcionando
- Se informa a los usuarios
- Los datos en caché se marcan como obsoletos
- Se muestra indicación clara
- El sistema continúa intentando reconectarse
Reconexión Automática
El sistema intenta continuamente restaurar la conexión:
// Lógica de reconexión
function tryReconnect() {
fetch('/api/health')
.then(() => {
showNotification('Conexión restaurada')
refreshData()
})
.catch(() => {
attempts++
const delay = attempts < 30 ? 1000 :
attempts < 60 ? 5000 : 30000
setTimeout(tryReconnect, delay)
})
}Gestión de Caché
Limpieza Automática
El Service Worker realiza limpieza automática:
En actualización de la app:
Código:
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames
.filter(name => name !== CURRENT_CACHE)
.map(name => caches.delete(name))
)
})
)
})Limpieza Manual del Caché
Método 1: Vía DevTools del Navegador
Método 2: Vía Consola JavaScript
// Limpiar todos los cachés
caches.keys().then(names => {
names.forEach(name => caches.delete(name))
})
// Re-registrar Service Worker
navigator.serviceWorker.getRegistration().then(reg => {
reg.unregister()
window.location.reload()
})Método 3: Actualización Forzada
Método 4: API de Mensajes
// Enviar mensaje de limpieza al Service Worker
navigator.serviceWorker.controller.postMessage({
type: 'CLEAR_CACHE',
cache: 'all' // o 'api', 'assets', 'runtime'
})Gestión del Tamaño del Caché
Límites del navegador:
Uso típico de LobbyFlight:
Desalojo Automático:
El navegador elimina automáticamente cachés antiguos cuando:
Solución de Problemas Sin Conexión
Problema: Se Muestran Datos Antiguos
Síntomas:
Diagnóstico:
Soluciones:
Problema: Modo Sin Conexión a Pesar de Tener Internet
Síntomas:
Diagnóstico:
Soluciones:
Problema: El Service Worker No Carga
Síntomas:
Diagnóstico:
// Ejecutar en Consola
navigator.serviceWorker.getRegistrations().then(regs => {
console.log('SWs registrados:', regs)
})Soluciones:
Problema: El Caché Crece Demasiado
Síntomas:
Diagnóstico:
// Verificar tamaño del caché
navigator.storage.estimate().then(estimate => {
console.log(`Usado: ${estimate.usage / 1024 / 1024}MB`)
console.log(`Cuota: ${estimate.quota / 1024 / 1024}MB`)
})Soluciones:
Mejores Prácticas para Operación Sin Conexión
Configuración Óptima
Para red estable:
Para red inestable:
Preparación para Modo Sin Conexión
Antes del despliegue:
Mantenimiento regular:
Monitoreo
Qué monitorear:
Umbrales de alerta:
Configuración Avanzada
Página Sin Conexión Personalizada
Puedes diseñar una página sin conexión personalizada:
Plantilla HTML (/public/custom-offline.html):
<!DOCTYPE html>
<html>
<head>
<title>Sin Conexión - [Nombre del Hotel]</title>
<style>
/* Tu estilo personalizado */
</style>
</head>
<body>
<div class="container">
<img src="/logo.png" alt="Logo del Hotel">
<h1>Actualmente sin conexión</h1>
<p>Mostrando datos de vuelos en caché...</p>
<div id="last-update"></div>
</div>
<script>
// Lógica de reconexión personalizada
</script>
</body>
</html>Personalización de Estrategias de Caché
Para requisitos especiales:
// Mayor tiempo de caché para imágenes
if (request.destination === 'image') {
return caches.match(request) || fetch(request).then(response => {
cache.put(request, response.clone())
return response
})
}
// Sin caché para APIs específicas
if (request.url.includes('/realtime/')) {
return fetch(request) // Siempre fresco
}Analíticas Sin Conexión
Rastreo de eventos sin conexión:
// Al perder conexión
navigator.sendBeacon('/api/analytics', JSON.stringify({
event: 'offline_start',
timestamp: new Date().toISOString(),
cached_items: await countCachedItems()
}))
// Al reconectarse
navigator.sendBeacon('/api/analytics', JSON.stringify({
event: 'offline_end',
duration: offlineDuration,
cache_hits: cacheHitCount
}))