Detectar perdida de conexión a internet con javascript
Como detectar pérdida de conexión a internet
Hoy en día muchos sitios web se cargan mediante peticiones javascript para no tener que cargar una y otra vez todo el contenido de un sitio web y solo realizamos peticiones a una API con los datos necesarios, esto aveces da dolores de cabeza cunado el cliente pierde su conexión a internet y falla la petición a la api causando un error que dependiendo el sitio web puede estar controlado o no.
Vamos a ver una forma sencilla de detectar perdidas de conexión a internet con javascript y en tal caso servir los datos que tengamos guardados en nuestro cache, o algún mensaje haciendo le saber al cliente que su conexión ha sido perdida, para que pueda tomar las medidas oportunas.
Detectando la perdida de conexión a internet
La mayoría de navegadores modernos tiene un evento para cuando se pierde la conexión, pero los navegadores antiguos no así que usaremos un intervalo también para tener compatibilidad con todos los navegadores, y también usaremos además otro método que hará una petición para detectar esta perdida ya que estos eventos aveces y dependiendo el navegador pueden mandar el dato incorrecto.
Método para detectar perdida de conexión compatible con todos los navegadores
function isOnline(path = '/favicon.ico') {
// Manejar IE y navegadores más capaces
const xhr = new (window.ActiveXObject || XMLHttpRequest)('Microsoft.XMLHTTP');
// Abra una nueva solicitud como HEAD al nombre de host raíz con un parámetro aleatorio para destruir la memoria caché
xhr.open('HEAD', `//${window.location.host}${path}?rand=${Math.floor((1 + Math.random()) * 0x10000)}`, true);
// Enviar solicitud y manejar respuesta
return new Promise(resolve => {
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304))
{
return resolve(true);
}
resolve(false);
}
};
xhr.send(null);
});
}
Registrando los eventos y el intervalo de tiempo para navegadores más antiguos
window.addEventListener('online', async () => { const window.isOnline = await isOnline(); });
window.addEventListener('offline', async () => { const window.isOnline = await isOnline(); });
setInterval(() => {
window.isOnline = await isOnline();
}, 30000);
Ya tenemos todo lo necesario para detectar una perdida de conexión de nuestro cliente y poder mandarle un mensaje de alerta o cargar los contenidos directamente de la cache en caso de tener algún sistema preparado para guardar estas solicitudes en cache, usando el almacenamiento del navegador por ejemplo.
En WebMediums usamos algo similar para detectar estas perdidas para así poder mostrarle al usuario los contenidos directamente desde el cache y no tenga que esperar a que la conexión falle, tratando de dar la máxima calidad en experiencia de lectura, WebMediums es accesible sin necesidad de tener conexión a internet así que estos métodos nos ayudan a poder avisar a los usuarios y mostrarle los contenidos sin tener que esperar a que las solicitudes fallen y no tengan que esperar para poder consumir nuestros artículos, claro esta que si el articulo que se quiera leer no esta todavía en el almacenamiento del navegador no podremos mostrar nada.
Espero les sea de ayuda esta información y lo puedan implementar en sus proyectos.