internet explorer

[ASP.NET] Manejando los eventos offline y online

Posted on

Internet Explorer (versiones 8, 9 y 10) permite detectar el cambio del estado de red mediante los eventos offline y online, adicionalmente mediante navigator.onLine es posible determinar el estado de la red.

navigator.onLine retorna true si se esta en un estado online, de lo contrario devuelve false.

Ahora, para determinar automáticamente el cambio en el estado de la red, se debe crear dos escuchadores, uno para el evento online y otro para el evento offline. La sintaxis es:

   1:  document.body.addEvenListener("offline/online"), function(){
   2:          //código de la función
   3:      },false);

Así que vamos a desarrollar un ejemplo:

1. Creamos un label el cual va a mostrar el estado de la red:

   1:  <strong>Estado aplicación: </strong><label id="lblEstado"></label>

2. Creamos una función JavaScript que recibe como parámetro el estado de la red (string), asigna el texto al label y cambia el color del texto a verde si el estado es online o rojo si es offline:

   1:  function Estado(est) {
   2:     lbl.html(est);
   3:     if (est == 'online')
   4:         lbl.css("color", "green");
   5:     else
   6:         lbl.css("color","red");
   7:  }

3. Se crean los escuchadores para los eventos online y offline:

   1:  document.body.addEventListener("offline", function () {
   2:      Estado("offline")
   3:  }, false);
   4:   
   5:  document.body.addEventListener("online", function () {
   6:      Estado("online")
   7:  }, false);

4. En el cargue de la página se determina el estado inicial:

   1:  var lbl = $("#lblEstado");
   2:  var estInicial = navigator.onLine ? "online" : "offline";
   3:  Estado(estInicial);

Finalmente todo el código JavaScript es:

   1:  $(function () {
   2:      var lbl = $("#lblEstado");
   3:      var estInicial = navigator.onLine ? "online" : "offline";
   4:      Estado(estInicial);
   5:   
   6:      document.body.addEventListener("offline", function () {
   7:          Estado("offline")
   8:      }, false);
   9:   
  10:      document.body.addEventListener("online", function () {
  11:          Estado("online")
  12:      }, false);
  13:   
  14:      function Estado(est) {
  15:          lbl.html(est);
  16:          if (est == 'online')
  17:              lbl.css("color", "green");
  18:          else
  19:              lbl.css("color","red");
  20:      }
  21:  })

Como se puede ver es bastante sencillo, les dejo un ejemplo que implementa dicha funcionalidad, para poder verlo en acción una vez tengan cargada la página seleccionen la opción Trabajar sin conexión, y verán que automáticamente se cambia el estado a offline, y al desactivarlo se cambia a online.

El ejemplo es sencillo, sin embargo la idea es implementar una buena lógica para manejar este tipo de estados.

Descarga el ejemplo! (el archivo se llama Eventos offline y online)