Eventos Online y Offline en HTML 5

Debido a la gran aceptación de los dispositivos móviles, tanto tablets como smartphones, nos hemos visto en la necesidad de tener en cuenta diferentes factores que hasta día de hoy no eran relativamente importantes: la conexión/desconexión a Internet (siempre se daba por hecho que disponíamos de ella). Es por ello que en la especificación de HTML 5 nos facilitan la forma de saber cuándo un usuario no dispone de conexión, para poder actuar en consecuencia: Parar las peticiones al servidor remoto, avisar al usuario, almacenar el trabajo en curso en el Storage del navegador, etcétera. Para ello contamos con dos eventos y una propiedad a nivel de la interfaz navigator.

navigator.onLine

navigator.onLine se trata de una propiedad que almacena true o false cuando nuestro navegador está en modo online/offline. Esta propiedad se actualiza cuando el navegador entra en modo Trabajar sin conexión (Working Offline), bien porque el usuario así lo ha querido o porque el navegador ha detectado que en ese momento no dispone de salida a Internet.

Eventos online y offline

Estos dos elementos son lanzados a nivel del body del documento y no es posible cancelar los mismos. Gracias a ellos, seremos capaces de capturar en qué momento hemos perdido o recuperado la conexión.

En el siguiente ejemplo se muestra cómo trabajar con ellos:

<!DOCTYPE html>
<html>
<head>
    <title>Online and Offline events</title>
    <style>
    body {
        font-family: Segoe UI;
        font-size: 9pt;
    }
    h1 {
        font-family: Segoe UI;
        font-weight: lighter;
        background-color: rgb(27, 161, 226);
        color: #fff;
        padding: 20px;
    }
    h2 {
        color: #fff;
        font-family: Segoe UI;
        font-weight: lighter;
        padding: 10px;
    }
    .offline {
        background-color: red;
    }
    .online {
        background-color: green;
    }
    </style>
</head>
<body>
    <header>
        <h1>Offline events</h1>
        <h2 id="status"></h2>
    </header>
    <script>
    (function () {
        function isOnline() {
            return navigator.onLine;
        }
        function checkStatus() {
            var status = document.getElementById("status");
            if (isOnline()) {
                status.className = "online";
                status.innerText = "Online";
            } else {
                status.className = "offline";
                status.innerText = "Offline";
            }
        }
        window.addEventListener("online", checkStatus);
        window.addEventListener("offline", checkStatus);
        checkStatus();
    })();
    </script>
</body>
</html>

Lo único que tenemos es una cabecera con un h2 con el id status, la cual se pinta de color verde o rojo cuando disponemos o no de conexión a Internet. Para hacer la prueba, basta con desactivar la conexión del dispositivo o bien cambiar el modo a offline en nuestro navegador. El handler en este caso está a nivel de window, pero puede asignarse a nivel de document o document.body que es realmente donde ocurre.

Para probar esta funcionalidad podéis acceder al siguiente enlace. De hecho, el propio JSFiddle controla este evento y nos avisa cuando deshabilitamos el acceso a Internet 🙂

Visto esto, os recomiendo que echéis un vistazo a un antiguo post, donde se habla de las aplicaciones offline con Application Cache.

¡Saludos!