Muchas de las aplicaciones web que desarrollamos son para móviles. En este sentido es bueno saber, de cara a poder ofrecer más o menos funcionalidades, si el dispositivo que carga la página tiene conexión a internet o está desconectado. Es por ello que vamos a revisar y conocer un poco más cómo funciona el modo online y offline en HTML5.
La propiedad Javascript que nos va a permitir consular el estado de conexión del dispositivo es window.navigator.onLine. Así que de una forma sencilla podemos consultar cual es el estado de conexión del dispositivo mediante la siguiente línea de código:
modo = (window.navigator.onLine)?"OnLine":"OffLine";
Incluso lo podemos insertar en la pantalla incluyendo el contenido en algún elemento HTML como podría ser un elemento span.
<h1>Dectectar Offline/OnLine</h1>
El navegador está en modo <strong><span id="mode"></span></strong>
<script>
texto = document.getElementById("mode");
modo = (window.navigator.onLine)?"OnLine":"OffLine";
texto.innerHTML = modo;
console.log("Conexión Inicial " + modo);
</script>
Hasta aquí es muy sencillo. Pero hay una cosa que tenemos que tener en cuenta. Esta cosa es que el estado del dispositivo puede cambiar de Online a Offline y viceversa muchas veces. Ya sea porque el dispositivo no tenga cobertura, porque el usuario decida desconectar la conexión a red,…. Es por ello que deberemos de controlar estos cambios de estado para conocer siempre en qué modo nos encontramos, y por lo tanto poder obrar en consecuencia.
Para poder conseguir esto vamos a controlar dos eventos: offline y online. Estos eventos se disparan en la ventana del navegador cada vez que hay un cambio de estado en la conexión del dispositivo. Es por ello que nos vamos a apoyar en el método .addEventListener() para poder controlar dichos eventos.
window.addEventListener("offline",function(e){
console.log("Conexión perdida")
texto = document.getElementById("mode");
texto.innerHTML = "OffLine";
});
window.addEventListener("online",function(e){
console.log("Conexión establecida")
texto = document.getElementById("mode");
texto.innerHTML = "OnLine";
});
Vemos que asociamos una función a estos eventos en la que simplemente cambiamos el valor de nuestro elemento span para indicar el nuevo estado del dispositivo. De esta forma sabremos constantemente el estado de conexión en el que se encuentra el dispositivo, algo que hemos conseguido controlando el modo online y offline en HTML5.
