Rileva la connessione a Internet offline?

Come rilevare la connessione a Internet non è in linea in JavaScript?

È possibile determinare che la connessione viene persa effettuando richieste XHR non riuscite .

L'approccio standard è quello di ritentare la richiesta più volte. Se il problema persiste, avvisare l'utente di controllare la connessione e fallire con grazia .

Sidenote: mettere l'intera applicazione in uno stato "offline" può portare a un sacco di lavoro soggetto a errori di gestione dello stato .. le connessioni wireless possono andare e venire, ecc. Quindi la tua scommessa migliore potrebbe essere semplicemente fallire con grazia, preservare il dati e avvisa l'utente .. consentendo loro di risolvere eventualmente il problema di connessione, se presente, e di continuare a utilizzare la tua app con una buona dose di perdono.

Sidenote: potresti verificare la connettività di un sito affidabile come google, ma questo potrebbe non essere del tutto utile come provare a fare la tua richiesta, perché mentre Google potrebbe essere disponibile, la tua applicazione potrebbe non esserlo e continuerai a devi gestire il tuo problema di connessione. Cercare di inviare un ping a Google sarebbe un buon modo per confermare che la connessione a Internet stessa è inattiva, quindi se tali informazioni ti sono utili, allora potrebbe valere la pena.

Sidenote : l' invio di un ping potrebbe essere realizzato nello stesso modo in cui si farebbe qualsiasi tipo di richiesta ajax bidirezionale, ma l'invio di un ping a Google, in questo caso, comporterebbe alcune sfide. Innanzitutto, avremmo gli stessi problemi tra domini che si verificano in genere durante le comunicazioni Ajax. Un'opzione è quella di impostare un proxy lato server, in cui effettivamente pingGoogle (o qualunque sito) e restituire i risultati del ping all'app. Questo è un fermo-22perché se la connessione Internet è effettivamente il problema, non saremo in grado di accedere al server e se il problema di connessione è solo sul nostro dominio, non saremo in grado di dire la differenza. Altre tecniche tra domini potrebbero essere provate, ad esempio, incorporando un iframe nella tua pagina che punta a google.com e quindi eseguendo il polling dell'iframe per esito positivo / negativo (esaminare i contenuti, ecc.). Incorporare un'immagine potrebbe non dirci davvero nulla, perché abbiamo bisogno di una risposta utile dal meccanismo di comunicazione per trarre una buona conclusione su ciò che sta accadendo. Quindi, di nuovo, determinare lo stato della connessione Internet nel suo insieme potrebbe essere più un problema di quanto valga la pena. Dovrai ponderare queste opzioni per la tua app specifica.

Internet Explorer 8 supporterà window.navigator.onLine proprietà .

Ma ovviamente ciò non aiuta con altri browser o sistemi operativi. Prevedo che altri fornitori di browser decideranno di fornire tale proprietà, data l'importanza di conoscere lo stato online / offline nelle applicazioni Ajax.

Fino a quando ciò non accada, XHR o una richiesta Image()o <img>possono fornire qualcosa di simile alla funzionalità desiderata.

Aggiornamento (2014/11/16)

I principali browser ora supportano questa proprietà, ma i risultati possono variare.

Citazione dalla documentazione di Mozilla :

In Chrome e Safari, se il browser non è in grado di connettersi a una rete locale (LAN) o un router, è offline; tutte le altre condizioni ritornano true. Quindi, mentre puoi supporre che il browser non sia in linea quando restituisce un falsevalore, non puoi assumere che un valore vero significhi necessariamente che il browser può accedere a Internet. È possibile che si ottengano falsi positivi, ad esempio nei casi in cui il computer esegue un software di virtualizzazione con adattatori Ethernet virtuali che sono sempre "connessi". Pertanto, se si desidera veramente determinare lo stato online del browser, è necessario sviluppare ulteriori mezzi per il controllo.

In Firefox e Internet Explorer, il passaggio dal browser alla modalità offline invia un falsevalore. Tutte le altre condizioni restituiscono un truevalore.

Quasi tutti i principali browser ora supportano la window.navigator.onLineproprietà e gli eventi corrispondenti onlinee della offlinefinestra:

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

Prova a impostare il tuo sistema o browser in modalità offline / online e controlla la console o la window.navigator.onLineproprietà per le modifiche del valore. Puoi testarlo anche su questo sito web .

Nota comunque questa citazione dalla documentazione di Mozilla :

In Chrome e Safari, se il browser non è in grado di connettersi a una rete locale (LAN) o un router, è offline; tutte le altre condizioni ritornano true. Quindi, mentre puoi supporre che il browser non sia in linea quando restituisce un falsevalore , non puoi assumere che un truevalore significhi necessariamente che il browser può accedere a Internet . È possibile che si ottengano falsi positivi, ad esempio nei casi in cui il computer esegue un software di virtualizzazione con adattatori Ethernet virtuali che sono sempre "connessi". Pertanto, se si desidera veramente determinare lo stato online del browser, è necessario sviluppare ulteriori mezzi per il controllo.

In Firefox e Internet Explorer, il passaggio dal browser alla modalità offline invia a false valore. Fino a Firefox 41, tutte le altre condizioni restituiscono un truevalore; da Firefox 41, su OS X e Windows, il valore seguirà l'effettiva connettività di rete.

(l'enfasi è mia)

Questo significa che se window.navigator.onLine è false(o ricevi un offlineevento), sei sicuro di non avere una connessione a Internet.

Se è true comunque (o ottieni un onlineevento), significa solo che il sistema è connesso ad una rete, nella migliore delle ipotesi. Ad esempio, non si ha accesso a Internet. Per verificarlo, dovrai comunque utilizzare una delle soluzioni descritte nelle altre risposte.

_{Inizialmente avevo intenzione di pubblicare questo come aggiornamento della risposta di Grant Wagner , ma mi è sembrato troppo di una modifica, soprattutto considerando che l'aggiornamento del 2014 non era già da lui .}

Esistono diversi modi per farlo:

• Richiesta AJAX al tuo sito web. Se la richiesta fallisce, ci sono buone probabilità che sia la connessione a essere difettosa. La documentazione di JQuery contiene una sezione sulla gestione delle richieste AJAX non riuscite . Fai attenzione alla stessa politica sull'origine durante questa operazione, che potrebbe impedirti di accedere a siti esterni al tuo dominio.

• Potresti mettere un onerrorin img, come

  <img src='http://www.example.com/singlepixel.gif' 
        onerror='alert("Connection dead");' />

  Questo metodo potrebbe anche fallire se l'immagine di origine viene spostata / rinominata e sarebbe generalmente una scelta inferiore all'opzione ajax.

Quindi ci sono diversi modi per provare a rilevare questo, nessuno perfetto, ma in assenza della possibilità di saltare fuori dalla sandbox del browser e accedere direttamente allo stato della connessione di rete dell'utente, sembrano essere le migliori opzioni.

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

L'API della cache dell'applicazione HTML5 specifica navigator.onLine, che è attualmente disponibile nelle beta IE8, nei nightly WebKit (ad esempio Safari) ed è già supportato in Firefox 3

È possibile utilizzare $ .ajax () 's errorcallback, che gli incendi se la richiesta non riesce. Se è textStatusuguale alla stringa "timeout", probabilmente significa che la connessione è interrotta:

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

Dal documento :

Errore : una funzione da chiamare se la richiesta fallisce. Alla funzione vengono passati tre argomenti: l'oggetto XMLHttpRequest, una stringa che descrive il tipo di errore che si è verificato e un oggetto eccezione facoltativo, se presente. I valori possibili per il secondo argomento (oltre a null) sono "timeout", "errore", "non modificato" e "parsererror". Questo è un evento Ajax

Quindi per esempio:

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

Come ha detto Olliej, navigator.onLineè preferibile utilizzare la proprietà del browser piuttosto che inviare richieste di rete e, di conseguenza con developer.mozilla.org/En/Online_and_offline_events , è persino supportato da vecchie versioni di Firefox e IE.

Di recente, WHATWG ha specificato l'aggiunta degli eventi onlinee offline, nel caso in cui sia necessario reagire alle navigator.onLinemodifiche.

Si prega inoltre di prestare attenzione al collegamento pubblicato da Daniel Silveira che sottolinea che fare affidamento su tali segnali / proprietà per la sincronizzazione con il server non è sempre una buona idea.

window.navigator.onLine

è quello che stai cercando, ma poche cose qui da aggiungere, in primo luogo, se è qualcosa sulla tua app che vuoi continuare a controllare (ad esempio per vedere se l'utente improvvisamente passa offline, che corregge in questo caso la maggior parte delle volte, allora tu è necessario ascoltare anche le modifiche), per cui aggiungi listener di eventi alla finestra per rilevare eventuali modifiche, per verificare se l'utente passa offline, puoi fare:

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

e per verificare se online:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

Ho dovuto creare un'app Web (basata su Ajax) per un cliente che lavora molto con le scuole, queste scuole hanno spesso una cattiva connessione a Internet. Uso questa semplice funzione per rilevare se esiste una connessione, funziona molto bene!

Uso CodeIgniter e Jquery:

function checkOnline() {
    setTimeout("doOnlineCheck()", 20000);
}

function doOnlineCheck() {
    //if the server can be reached it returns 1, other wise it times out
    var submitURL = $("#base_path").val() + "index.php/menu/online";

    $.ajax({
        url : submitURL,
        type : "post",
        dataType : "msg",
        timeout : 5000,
        success : function(msg) {
            if(msg==1) {
                $("#online").addClass("online");
                $("#online").removeClass("offline");
            } else {
                $("#online").addClass("offline");
                $("#online").removeClass("online");
            }
            checkOnline();
        },
        error : function() {
            $("#online").addClass("offline");
            $("#online").removeClass("online");
            checkOnline();
        }
    });
}

una chiamata Ajax al tuo dominio è il modo più semplice per rilevare se sei offline

$.ajax({
      type: "HEAD",
      url: document.location.pathname + "?param=" + new Date(),
      error: function() { return false; },
      success: function() { return true; }
   });

questo è solo per darti il ​​concetto, dovrebbe essere migliorato.

Ad esempio, l'errore = 404 dovrebbe comunque significare che sei online

Penso che sia un modo molto semplice.

var x = confirm("Are you sure you want to submit?");
if (x) {
  if (navigator.onLine == true) {
    return true;
  }
  alert('Internet connection is lost');
  return false;
}
return false;

Stavo cercando una soluzione lato client per rilevare se Internet era inattivo o il mio server inattivo. Le altre soluzioni che ho trovato sembravano sempre dipendere da un file di script o un'immagine di terze parti, che per me non sembrava resistere alla prova del tempo. Uno script o un'immagine ospitati esterni potrebbero cambiare in futuro e causare il fallimento del codice di rilevamento.

Ho trovato un modo per rilevarlo cercando un xhrStatus con un codice 404. Inoltre, utilizzo JSONP per aggirare la restrizione CORS. Un codice di stato diverso da 404 indica che la connessione Internet non funziona.

$.ajax({
    url:      'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html',
    dataType: 'jsonp',
    timeout:  5000,

    error: function(xhr) {
        if (xhr.status == 404) {
            //internet connection working
        }
        else {
            //internet is down (xhr.status == 0)
        }
    }
});

A modo mio.

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

Il problema di alcuni metodi simili navigator.onLineè che non sono compatibili con alcuni browser e versioni mobili, un'opzione che mi ha aiutato molto è stata quella di utilizzare il XMLHttpRequestmetodo classico e prevedere anche il possibile caso in cui il file fosse archiviato nella cache con una risposta XMLHttpRequest.statusmaggiore di 200 e meno di 304.

Ecco il mio codice:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

Sono disponibili 2 risposte per due diversi senari: -

1. Se si utilizza JavaScript su un sito Web (ovvero; o qualsiasi parte front-end) Il modo più semplice per farlo è:

   <h2>The Navigator Object</h2>
   
   <p>The onLine property returns true if the browser is online:</p>
   
   <p id="demo"></p>
   
   <script>
     document.getElementById("demo").innerHTML = "navigator.onLine is " + navigator.onLine;
   </script>

2. Ma se stai usando js sul lato server (es.; Nodo ecc.), Puoi determinare che la connessione viene persa facendo richieste XHR fallite.

   L'approccio standard è di ripetere la richiesta più volte. Se il problema persiste, avvisare l'utente di controllare la connessione e fallire con grazia.

testa richiesta nell'errore richiesta

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

Ecco un frammento di un'utilità di supporto che ho. Questo è javascript con spazio dei nomi:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

Dovresti usarlo con il rilevamento del metodo, altrimenti spegni un modo "alternativo" per farlo. Il tempo si sta avvicinando rapidamente quando sarà tutto ciò che è necessario. Gli altri metodi sono hack.