Detectar el estado de la conexión a Internet con JavaScript

Una buena idea para mejorar la experiencia del usuario es la de monitorear el estado de su conexión a Internet, para y en caso de detectar alguna interrupción, avisarle a nuestro visitante que encontramos un problema de conectividad, algo muy similar a lo que hace Gmail.

Para lograr esta funcionalidad tenemos distintas alternativas, una de ellas es utilizar JavaScript, para ello podemos valernos de Offline.js, una pequeña biblioteca JavaScript para que nos permite detectar el estado de la conexión de forma muy sencilla.

check estado internet

Offline.js detecta el estado de la conexión mediante una simple llamada Ajax a nuestro servidor solicitando un archivo cualquiera, en caso de fallar la solicitud nos brinda de una serie de mecanismos para informar de la falla de conectividad al usuario. El archivo a solicitar se puede configurar simplemente:

Offline.options = {checks: {image: {url: 'my-image.gif'}}};

El proyecto cuenta con una serie de temas visuales para personalizar la forma de presentar el problema a nuestros visitantes, además su tamaño es mínimo, apenas unos 3KB en su versión simplificada y comprimida mediante gzip.

Comprobar la conectividad es muy sencillo, tan solo requiere una llamada a la biblioteca:

Offline.check()

Un detalle interesante de este proyecto es que también permite detectar el momento cuando la conexión se restablece.

El punto negativo de su utilización es el relacionado al numero de solicitudes al servidor, por ejemplo si queremos comprobar el estado de la conexión del cliente cada 10 segundos estaríamos haciendo 360 solicitudes por hora a nuestro servidor web. Esto obviamente se puede configurar, probablemente no sea necesario comprobar el estado en un lapso tan corto de tiempo.

Categorizado en: