¿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?

Casi todos los principales navegadores ahora apoya el window.navigator.onLine propiedad, y la correspondiente online y offline eventos de ventana 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:

Intente configurar su sistema o navegador en modo fuera de línea/en línea y verifique el registro o el window.navigator.onLine propiedad para los cambios de valor.

Nótese sin embargo esta cita de Documentación de Mozilla:

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o un enrutador, está fuera de línea; todas las demás condiciones regresan true. así que mientras puede suponer que el navegador está fuera de línea cuando devuelve un false valor, no puedes asumir que un true valor significa necesariamente que el navegador puede acceder a Internet. Es posible que obtenga 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 verificar.

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

(el subrayado es mío)

Esto significa que si window.navigator.onLine es false (o obtienes un offline evento), se garantiza que no tendrá conexión a Internet.

Si esto es true sin embargo (o obtienes un online evento), solo significa que el sistema está conectado a alguna red, en el mejor de los casos. No significa que tenga acceso a Internet, por ejemplo. Para verificar eso, aún deberá usar 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 teniendo en cuenta que la actualización de 2014 ya no era de él.}

Puede determinar que la conexión se ha perdido haciendo solicitudes XHR fallidas.

El enfoque estándar es reintentar la solicitud unas pocas veces. Si no pasa, alertar al usuario para comprobar la conexión, y fallar con gracia.

Nota al margen: Poner toda la aplicación en un estado “fuera de línea” puede conducir a una gran cantidad de trabajo propenso a errores de manejo del estado… las conexiones inalámbricas pueden aparecer y desaparecer, etc. y alertar al usuario… permitiéndole eventualmente solucionar el problema de conexión si lo hay, y continuar usando su aplicación con una buena cantidad de perdón.

Nota al margen: Puede verificar la conectividad de un sitio confiable como Google, pero esto puede no ser del todo útil para tratar de hacer su propia solicitud, porque si bien Google puede estar disponible, su propia aplicación puede no estarlo, y aún tendrá que hacerlo. manejar su 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 podría lograrse 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 en realidad ping Google (o cualquier sitio) y devolver los resultados del ping a la aplicación. Esto es un 22 capturas 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 pueden probar otras técnicas de dominio cruzado, por ejemplo, incrustar un iframe en su página que apunte a google.com, y luego sondear el iframe para el éxito/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 sacar una buena conclusión sobre lo que está pasando. Entonces, nuevamente, determinar el estado de la conexión a Internet en su conjunto puede ser más problemático de lo que vale. Tendrá que sopesar estas opciones para su aplicación específica.

IE 8 admitirá el ventana.navigator.onLine propiedad.

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

Hasta que eso suceda, ya sea XHR o un Image() o <img> request puede proporcionar algo cercano a la funcionalidad que desea.

Actualización (2014/11/16)

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

Cita de Documentación de Mozilla:

En Chrome y Safari, si el navegador no puede conectarse a una red de área local (LAN) o un enrutador, está fuera de línea; todas las demás condiciones regresan true. Entonces, si bien puede suponer que el navegador está fuera de línea cuando devuelve un false valor, no puede asumir que un valor verdadero significa necesariamente que el navegador puede acceder a Internet. Es posible que obtenga 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 verificar.

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

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

Ver onLine Uso básico

Hay muchas maneras de hacer esto:

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

Este método también podría fallar si la imagen de origen se mueve o cambia de nombre 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 en ausencia de la capacidad de salir del entorno limitado del navegador y acceder directamente al estado de conexión de la red del usuario, parecen ser las mejores opciones.

Como dijo olliej, usando el navigator.onLine la propiedad del navegador es preferible a enviar solicitudes de red y, de acuerdo con developer.mozilla.org/En/Online_and_offline_eventsincluso es compatible con versiones antiguas de Firefox e IE.

Recientemente, el WHATWG ha especificado la adición de la online y offline eventos, en caso de que necesite reaccionar navigator.onLine cambios.

También preste atención al enlace publicado por Daniel Silveira que señala que confiar en esa señal/propiedad para sincronizar con el servidor no siempre es una buena idea.

Puedes usar $.ajax()‘s error devolución de llamada, que se activa si la solicitud falla. Si textStatus es igual a la cadena “tiempo de espera”, probablemente significa que la conexión está rota:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

Desde el doc:

Error: una función que se llamará si la solicitud falla. A la función se le pasan tres argumentos: el objeto XMLHttpRequest, una cadena que describe el tipo de error que ocurrió y un objeto de excepción opcional, si ocurrió alguno. Los valores posibles para el segundo argumento (además de nulo) son “timeout”, “error”, “notmodified” y “parsererror”. Este es un evento de Ajax

Así por ejemplo:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });