¿Detectar si la conexión a Internet está fuera de línea?

¿Cómo puedo detectar si la conexión a Internet está fuera de línea en JavaScript?

Oct 10 '08 05:10 Daniel Silveira

Casi todos los principales navegadores ahora admiten la window.navigator.onLinepropiedad y los eventos onlinede offlineventana correspondientes. Ejecute el siguiente fragmento de código para probarlo:

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

Expandir fragmento

Intente configurar su sistema o navegador en modo fuera de línea/en línea y verifique el registro o la window.navigator.onLinepropiedad para ver los cambios de valores.

Sin embargo, tenga en cuenta esta cita de la documentación de Mozilla :

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o a un enrutador, está desconectado; todas las demás condiciones regresan true. Entonces, si bien puedes asumir que el navegador está fuera de línea cuando devuelve un falsevalor , no puedes asumir que un truevalor significa necesariamente que el navegador puede acceder a Internet . Podría obtener falsos positivos, como en los casos en que la computadora ejecuta un software de virtualización que tiene adaptadores Ethernet virtuales que siempre están "conectados". Por lo tanto, si realmente desea determinar el estado en línea del navegador, debe desarrollar medios adicionales para verificarlo.

En Firefox e Internet Explorer, cambiar el navegador al modo fuera de línea envía un falsevalor. Hasta Firefox 41, todas las demás condiciones devuelven un truevalor; Desde Firefox 41, en OS X y Windows, el valor dependerá de la conectividad de red real.

(el énfasis es mío)

Esto significa que si window.navigator.onLinees así false(o si obtiene un offlineevento), se garantiza que no tendrá conexión a Internet.

Sin embargo , si es trueasí (o recibe un onlineevento), solo significa que el sistema está conectado a alguna red, en el mejor de los casos. No significa que tengas acceso a Internet, por ejemplo. Para comprobarlo, aún deberá utilizar una de las soluciones descritas en las otras respuestas.

_{Inicialmente tenía la intención de publicar esto como una actualización de la respuesta de Grant Wagner , pero parecía una edición demasiado grande, especialmente considerando que la actualización de 2014 ya no era de él .}

Dec 17 '2018 17:12 Didier L

Puede determinar que la conexión se perdió realizando solicitudes XHR fallidas .

El enfoque estándar es volver a intentar la solicitud varias veces. Si no se realiza, avise al usuario para que verifique la conexión y falle sin problemas .

Nota al margen: Poner toda la aplicación en un estado "fuera de línea" puede generar una gran cantidad de trabajo de manejo del estado propenso a errores... las conexiones inalámbricas pueden aparecer y desaparecer, etc. Por lo tanto, lo mejor que puede hacer es simplemente fallar con gracia, preservar la datos y alertar al usuario... permitiéndole eventualmente solucionar el problema de conexión, si lo hay, y continuar usando su aplicación con bastante perdón.

Nota al margen: puede consultar un sitio confiable como Google para conocer la conectividad, pero esto puede no ser del todo útil si simplemente intenta realizar su propia solicitud, porque si bien Google puede estar disponible, su propia aplicación puede no estarlo, y aún así podrá acceder a ella. Tienes que manejar tu propio problema de conexión. Intentar enviar un ping a Google sería una buena manera de confirmar que la conexión a Internet no funciona, por lo que si esa información es útil para usted, entonces podría valer la pena.

Nota al margen : Enviar un ping se podría lograr de la misma manera que haría cualquier tipo de solicitud ajax bidireccional, pero enviar un ping a Google, en este caso, plantearía algunos desafíos. En primer lugar, tendríamos los mismos problemas entre dominios que normalmente se encuentran al realizar comunicaciones Ajax. Una opción es configurar un proxy del lado del servidor, en el que realmente buscamos pingen Google (o en cualquier sitio) y devolvemos los resultados del ping a la aplicación. Este es un problema porque si la conexión a Internet es realmente el problema, no podremos acceder al servidor, y si el problema de conexión es solo en nuestro propio dominio, no podremos notar la diferencia. . Se podrían probar otras técnicas entre dominios, por ejemplo, incrustar un iframe en su página que apunte a google.com y luego sondear el iframe en busca de éxito o fracaso (examinar el contenido, etc.). Es posible que incrustar una imagen no nos diga nada, porque necesitamos una respuesta útil del mecanismo de comunicación para poder sacar una buena conclusión sobre lo que está sucediendo. Nuevamente, determinar el estado de la conexión a Internet en su conjunto puede ser más problemático de lo que vale la pena. Tendrás que sopesar estas opciones para tu aplicación específica.

Oct 09 '2008 22:10 keparo

IE 8 admitirá la propiedad window.navigator.onLine .

Pero, por supuesto, eso no ayuda con otros navegadores o sistemas operativos. Predigo que otros proveedores de navegadores decidirán proporcionar esa propiedad también, dada la importancia de conocer el estado en línea/fuera de línea en las aplicaciones Ajax.

Hasta que eso suceda, XHR o una solicitud Image()o <img>pueden proporcionar algo parecido a la funcionalidad que desea.

Actualización (16/11/2014)

Los principales navegadores ahora admiten esta propiedad, pero los resultados variarán.

Cita de la documentación de Mozilla :

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o a un enrutador, está desconectado; todas las demás condiciones regresan true. Entonces, si bien puedes asumir que el navegador está desconectado cuando devuelve un falsevalor, no puedes asumir que un valor verdadero significa necesariamente que el navegador puede acceder a Internet. Podría obtener falsos positivos, como en los casos en que la computadora ejecuta un software de virtualización que tiene adaptadores Ethernet virtuales que siempre están "conectados". Por lo tanto, si realmente desea determinar el estado en línea del navegador, debe desarrollar medios adicionales para verificarlo.

En Firefox e Internet Explorer, cambiar el navegador al modo fuera de línea envía un falsevalor. Todas las demás condiciones devuelven un truevalor.

Oct 09 '2008 22:10 Grant Wagner

if (navigator.onLine) {
  alert('online');
} else {
  alert('offline');
}

Ver onLineuso básico

Apr 06 '2011 17:04 Edmhs

Hay muchas maneras de hacer esto:

Solicitud AJAX a su propio sitio web. Si esa solicitud falla, es muy probable que la falla sea la conexión. La documentación de JQuery tiene una sección sobre cómo manejar solicitudes AJAX fallidas . Tenga cuidado con la Política del mismo origen al hacer esto, que puede impedirle acceder a sitios fuera de su dominio.
Podrías poner un onerroren un img, como <img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />.

Este método también podría fallar si se mueve/cambia el nombre de la imagen de origen y, en general, sería una opción inferior a la opción ajax.

Por lo tanto, hay varias formas diferentes de intentar detectar esto, ninguna perfecta, pero a falta de la capacidad de salir del entorno limitado del navegador y acceder directamente al estado de conexión de red del usuario, parecen ser las mejores opciones.

Oct 09 '2008 22:10 ConroyP