El Atributo ONONLINE

Es un evento que se dispara cuando el navegador detecta que se restablece la conexión a internet.

El atributo ononline es un evento que se dispara cuando el navegador detecta que se restablece la conexión a internet. Esencial para:

  • Sincronizar datos pendientes

  • Actualizar contenido dinámico

  • Restaurar funcionalidades en línea

  • Notificar al usuario

Sintaxis Básica

HTML:

<body ononline="funcionDeReconexion()">

JavaScript:

window.addEventListener('online', () => {
    // Lógica de reconexión
});

Ejemplos Clave

Ejemplo 1: Notificación Inteligente

JavaScript:

function manejarConexionRestablecida() {
    mostrarNotificacion('¡Conectado! Sincronizando cambios...', 'success');
    document.documentElement.classList.remove('offline-mode');
}

Ejemplo 2: Sincronización Automática

JavaScript:

function sincronizarDatos() {
    if(localStorage.getItem('pendientes')) {
        enviarDatosAlServidor(JSON.parse(localStorage.getItem('pendientes')));
        localStorage.removeItem('pendientes');
    }
}

Ejemplo 3: Actualización de Contenido

JavaScript:

async function actualizarContenido() {
    const respuesta = await fetch('/ultima-actualizacion');
    const datos = await respuesta.json();
    actualizarUI(datos);
}

Buenas Prácticas

Combina con onoffline:

JavaScript:

window.addEventListener('offline', manejarOffline);

Verifica el estado real:

JavaScript:

function verificarConexionReal() {
    fetch('/ping').catch(() => false);
}

Maneja reintentos:

JavaScript:

let intentos = 0;
function sincronizarConReintentos() {
    if(intentos < 3) {
        // Lógica de sincronización
    }
}

Usa almacenamiento local:

JavaScript:

localStorage.setItem('datos-pendientes', JSON.stringify(datos));

Casos de Uso Avanzados

  • Reconexión en tiempo real: Reactivar WebSockets

  • Reintento automático de peticiones fallidas

  • Sincronización de formularios no enviados

  • Actualización de precios/cotizaciones

Compatibilidad

Navegador Soporte
Chrome ✅ 15+
Firefox ✅ 3.5+
Safari ✅ 5+
Edge ✅ 12+

Nota: Algunas redes corporativas pueden requerir configuración adicional para detectar correctamente el estado online.

Detección Precisa

Para mayor precisión, combina con:

JavaScript:

// Verificación activa de conexión
async function verificarConexionReal() {
    try {
        await fetch('https://httpbin.org/get', { mode: 'no-cors' });
        return true;
    } catch {
        return false;
    }
}

Conclusión

El atributo ononline es crucial para crear aplicaciones web resilientes que:

  1. Se recuperan automáticamente de interrupciones

  2. Mantienen la integridad de los datos

  3. Proporcionan una experiencia de usuario fluida

Implementa siempre:

  • Mecanismos de reintento inteligentes

  • Notificaciones claras al usuario

  • Sincronización bidireccional

  • Estrategias de caché apropiadas

HTML:

<!-- Ejemplo Final: Reconexión de WebSocket -->
<script>
let websocket;

function inicializarWebSocket() {
    websocket = new WebSocket('wss://tu-servidor.com');

    websocket.onclose = () => {
        if(navigator.onLine) {
            setTimeout(inicializarWebSocket, 5000);
        }
    };
}

window.addEventListener('online', inicializarWebSocket);
</script>

Este tutorial te proporciona las bases para crear aplicaciones que responden inteligentemente a los cambios de conexión. ¡Implementa estos patrones para mejorar la confiabilidad de tus aplicaciones web!

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "ononline" en HTML</title>
    <style>
        .status-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            text-align: center;
            display: none;
            z-index: 1000;
            animation: slideDown 0.5s;
        }

        .online { background: #2ecc71; color: white; }
        .offline { background: #e74c3c; color: white; }

        @keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

        .sync-section {
            border: 2px solid #3498db;
            padding: 1rem;
            margin: 2rem 0;
        }

        #pending-actions {
            margin: 1rem 0;
            padding: 0.5rem;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body ononline="manejarConexionRestablecida()" onoffline="manejarPerdidaConexion()">
    <div id="network-status" class="status-banner">
        <span id="status-message"></span>
        <button onclick="ocultarBanner()" style="margin-left: 1rem;">×</button>
    </div>

    <h1>Tutorial del atributo <code>ononline</code></h1>

    <!-- Ejemplo 1: Notificación de reconexión -->
    <section>
        <h2>1. Sistema de notificaciones</h2>
        <p id="connection-status">Estado actual: Verificando...</p>
    </section>

    <!-- Ejemplo 2: Sincronización automática -->
    <section class="sync-section">
        <h2>2. Sincronización de datos</h2>
        <button onclick="agregarDatosLocales()">Guardar localmente</button>
        <div id="pending-actions"></div>
        <p>Datos sincronizados: <span id="sync-counter">0</span></p>
    </section>

    <!-- Ejemplo 3: Actualización de contenido -->
    <section>
        <h2>3. Actualización dinámica</h2>
        <div id="live-content">
            <p>Cargando contenido actualizado...</p>
        </div>
    </section>

    <script>
        // Estado inicial
        let datosPendientes = [];
        let contadorSincronizacion = 0;

        // Manejar reconexión
        function manejarConexionRestablecida() {
            mostrarNotificacion('✅ Conexión restablecida - Sincronizando datos...', 'online');
            sincronizarDatosPendientes();
            actualizarContenidoDinamico();
            actualizarEstadoConexion();
        }

        // Manejar pérdida de conexión
        function manejarPerdidaConexion() {
            mostrarNotificacion('⚠️ Sin conexión - Trabajando en modo local', 'offline');
            actualizarEstadoConexion();
        }

        // Sistema de notificaciones
        function mostrarNotificacion(mensaje, tipo) {
            const banner = document.getElementById('network-status');
            banner.style.display = 'block';
            banner.className = `status-banner ${tipo}`;
            document.getElementById('status-message').textContent = mensaje;
        }

        function ocultarBanner() {
            document.getElementById('network-status').style.display = 'none';
        }

        // Sistema de sincronización
        function agregarDatosLocales() {
            const nuevoDato = `Dato ${Date.now()}`;
            if(navigator.onLine) {
                enviarAlServidor(nuevoDato);
            } else {
                datosPendientes.push(nuevoDato);
                actualizarListaPendientes();
            }
        }

        function sincronizarDatosPendientes() {
            if(datosPendientes.length > 0) {
                datosPendientes.forEach(dato => enviarAlServidor(dato));
                datosPendientes = [];
                actualizarListaPendientes();
            }
        }

        function enviarAlServidor(dato) {
            // Simular envío al servidor
            setTimeout(() => {
                contadorSincronizacion++;
                document.getElementById('sync-counter').textContent = contadorSincronizacion;
            }, 500);
        }

        function actualizarListaPendientes() {
            const lista = document.getElementById('pending-actions');
            lista.innerHTML = datosPendientes.map(d => `<div>${d} ⌛</div>`).join('');
        }

        // Actualización de contenido dinámico
        async function actualizarContenidoDinamico() {
            try {
                // Simular solicitud a API
                const respuesta = await fetch('https://jsonplaceholder.typicode.com/posts/1');
                const datos = await respuesta.json();
                document.getElementById('live-content').innerHTML = `
                    <h3>${datos.title}</h3>
                    <p>${datos.body}</p>
                `;
            } catch (error) {
                console.error('Error al actualizar contenido:', error);
            }
        }

        // Estado de conexión
        function actualizarEstadoConexion() {
            const estado = document.getElementById('connection-status');
            estado.textContent = `Estado actual: ${navigator.onLine ? 'En línea' : 'Offline'}`;
        }

        // Inicialización
        window.addEventListener('load', () => {
            actualizarEstadoConexion();
            if(navigator.onLine) actualizarContenidoDinamico();
        });

        // Método alternativo con addEventListener
        window.addEventListener('online', manejarConexionRestablecida);
        window.addEventListener('offline', manejarPerdidaConexion);
    </script>
</body>
</html>