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:
[html]<!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>[/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!
Excelente como siempre los pequeños ejemplos que pones que van directo al foco del problema.
Solo una pregunta, no propia del online-offline sino del codigo js del ejemplo. ¿Porque el final del codigo donde te bindeas a los eventos y llamas a la funcion checkstatus esta dentro de una funcion anonima y no directamente suelto en el script?
Saludos, y muchas gracias por compartir el conocimiento.
Hola Dieguito, tu pregunta es interesante, viendo el código yo creo que (en mi humilde opinión) en este caso NO es de mucha utilidad una función anónima, generalmente se usan para encapsular todo el código, en este caso se deja a las funciones afuera, lo cual no comprendo, también se usa para proteger el código, por ejemplo si no pones tu código en una función anónima, cualquier persona podría usar su consola y editar en tiempo real tus variables, y por último es recomendable pasarle como parámetros a nuestra función anónima tres objetos: window, document y el undefined, si se utiliza jQuery también debería pasarse el objeto $. En el código del ejemplo sí deberían pasarle cuando menos el objeto window, para que el motor de javascript no se demore en buscarlo, sería algo como:
(function (window) { …. })(window);
Espero haberme dejado entender, algunas veces suelo enredarme xD.
Saludos.
Hola dieguitofernandez y Wiwa 🙂
Lamento la tardanza en mi respuesta… No me llega la vida 🙂
He actualizado el código puesto que, como bien comentabais, no tenía mucho sentido cómo se estaba utilizando en este ejemplo: Lo que he hecho ha sido encapsular todo mi código dentro de esta función anónima, la cual se auto ejecuta, con el objetivo de limitar su uso a ese bloque de mi aplicación. Es una práctica muy común utilizar closures para evitar que una función o variable quede expuesta a nivel global, de toda la aplicación. Tiene muchas ventajas ya que evita conflictos con otras funciones, variables, lo que comenta Wiwa sobre la edición, etcétera.
¡Muchas gracias y saludos!