Come rilevare online / offline evento cross-browser?

StackOverflow https://stackoverflow.com/questions/3181080

Domanda

Sto cercando di rilevare con precisione quando il browser non è in linea, utilizzando gli eventi online e offline HTML5.

Ecco il mio codice: 

<script>
    // FIREFOX
    $(window).bind("online", applicationBackOnline); 
    $(window).bind("offline", applicationOffline);

    //IE
    window.onload = function() {
        document.body.ononline = IeConnectionEvent;
        document.body.onoffline = IeConnectionEvent;
    } 
</script>

Funziona bene quando ho appena colpito "Lavorare offline" su entrambi Firefox o IE, ma è una specie di lavorare in modo casuale quando ho effettivamente scollegare il cavo.

Qual è il modo migliore per rilevare questo cambiamento? Mi piacerebbe evitare di ripetere le chiamate Ajax con timeout.

È stato utile?

Soluzione

I produttori di browser non può essere d'accordo su come definire offline. Alcuni browser hanno una caratteristica Non in linea, che considerano parte di una mancanza di accesso alla rete, che è ancora diverso per l'accesso a Internet. Il tutto è un casino. Alcuni produttori di browser aggiornano la bandiera navigator.onLine quando l'accesso alla rete attuale è perso, altri non lo fanno.

Dal spec:

  

Restituisce false se l'agente utente è   sicuramente non in linea (disconnesso da   il network). Restituisce true se l'utente   agente potrebbe essere on-line.

     

Gli eventi online e offline sono   sparato quando il valore di questo attributo   modifiche.

     

Il navigator.onLine attribuiscono   return false se l'agente utente dovrà   Non contattare la rete quando l'utente   segue link o quando uno script   chiede una pagina remota (o sa che   come un tentativo fallirebbe), e deve   return true altrimenti.

Infine, le note Spec:

  

Questo attributo è intrinsecamente   inaffidabili. Un computer può essere   collegato ad una rete senza dover   l'accesso a Internet.

Altri suggerimenti

I principali produttori di browser differiscono su cosa significa "non in linea".

Chrome e Safari in grado di rilevare quando si va "offline" automaticamente -. Il che significa che "in linea" eventi e le proprietà scatterà automaticamente quando si scollega il cavo di rete

Firefox (Mozilla), Opera e IE adottare un approccio diverso, e si considera "online" a meno che non si sceglie in modo esplicito "modalità offline" nel browser -. Anche se non si dispone di una connessione di rete di lavoro

Ci sono argomenti validi per il comportamento di Firefox / Mozilla, che sono illustrate nei commenti di questo bug report:

https://bugzilla.mozilla.org/show_bug.cgi?id=654579

Ma, per rispondere alla domanda -. Non si può fare affidamento sulla linea / eventi offline / proprietà per rilevare se v'è in realtà la connettività di rete

Al contrario, è necessario utilizzare approcci alternativi.

La sezione "Note" di questo articolo per sviluppatori Mozilla fornisce link a due metodi alternativi:

https://developer.mozilla.org/en/Online_and_offline_events

"Se l'API non è implementata nel browser, è possibile utilizzare altri segnali per rilevare se si è offline tra cui l'ascolto per gli eventi di errore AppCache e interventi di XMLHttpRequest"

Questa link ad un esempio di approccio "di ascolto per gli eventi di errore AppCache":

http://www.html5rocks.com/en/mobile/workingoffthegrid / # toc-AppCache

... e un esempio di "ascolto per i guasti XMLHttpRequest" approccio:

http://www.html5rocks.com/en / mobile / workingoffthegrid / # toc-xml-http-request

HTH, - Chad

Oggi c'è una libreria JavaScript open source che fa questo lavoro:. Si chiama Offline.js

  

Per visualizzare automaticamente le indicazioni online / offline per gli utenti.

https://github.com/HubSpot/offline

Assicuratevi di controllare la piena README . Esso contiene gli eventi che si possono collegare in.

Ecco una pagina di prova . E 'bello / ha una bella interfaccia utente di feedback tra l'altro! :)

  

Offline.js Simula UI è un plug-in Offline.js   che permette di testare come le pagine rispondere a diverse   connettività stati senza dover utilizzare metodi di forza bruta per   disattivare la connettività attuale.

Il modo migliore che funziona ora in tutti i principali browser è il seguente script: 

(function () {
    var displayOnlineStatus = document.getElementById("online-status"),
        isOnline = function () {
            displayOnlineStatus.innerHTML = "Online";
            displayOnlineStatus.className = "online";
        },
        isOffline = function () {
            displayOnlineStatus.innerHTML = "Offline";
            displayOnlineStatus.className = "offline";
        };

    if (window.addEventListener) {
        /*
            Works well in Firefox and Opera with the 
            Work Offline option in the File menu.
            Pulling the ethernet cable doesn't seem to trigger it.
            Later Google Chrome and Safari seem to trigger it well
        */
        window.addEventListener("online", isOnline, false);
        window.addEventListener("offline", isOffline, false);
    }
    else {
        /*
            Works in IE with the Work Offline option in the 
            File menu and pulling the ethernet cable
        */
        document.body.ononline = isOnline;
        document.body.onoffline = isOffline;
    }
})();

Fonte: http://robertnyman.com/html5/offline/online-offline-events.html

Il window.navigator.onLine attributo ed i suoi eventi associati sono attualmente poco affidabili su alcuni web browser ( soprattutto Firefox desktop di ) come ha detto @Junto, così ho scritto un po 'di funzione (usando jQuery) che controllare periodicamente il stato della connettività di rete ed aumentare l'appropriata offline e online evento: 

// Global variable somewhere in your app to replicate the 
// window.navigator.onLine variable (it is not modifiable). It prevents
// the offline and online events to be triggered if the network
// connectivity is not changed
var IS_ONLINE = true;

function checkNetwork() {
  $.ajax({
    // Empty file in the root of your public vhost
    url: '/networkcheck.txt',
    // We don't need to fetch the content (I think this can lower
    // the server's resources needed to send the HTTP response a bit)
    type: 'HEAD',
    cache: false, // Needed for HEAD HTTP requests
    timeout: 2000, // 2 seconds
    success: function() {
      if (!IS_ONLINE) { // If we were offline
        IS_ONLINE = true; // We are now online
        $(window).trigger('online'); // Raise the online event
      }
    },
    error: function(jqXHR) {
      if (jqXHR.status == 0 && IS_ONLINE) {
        // We were online and there is no more network connection
        IS_ONLINE = false; // We are now offline
        $(window).trigger('offline'); // Raise the offline event
      } else if (jqXHR.status != 0 && !IS_ONLINE) {
        // All other errors (404, 500, etc) means that the server responded,
        // which means that there are network connectivity
        IS_ONLINE = true; // We are now online
        $(window).trigger('online'); // Raise the online event
      }
    }
  });
}

Si può usare in questo modo: 

// Hack to use the checkNetwork() function only on Firefox 
// (http://stackoverflow.com/questions/5698810/detect-firefox-browser-with-jquery/9238538#9238538)
// (But it may be too restrictive regarding other browser
// who does not properly support online / offline events)
if (!(window.mozInnerScreenX == null)) {
    window.setInterval(checkNetwork, 30000); // Check the network every 30 seconds
}

Per ascoltare la linea e gli eventi on-line (con l'aiuto di jQuery): 

$(window).bind('online offline', function(e) {
  if (!IS_ONLINE || !window.navigator.onLine) {
    alert('We have a situation here');
  } else {
    alert('Battlestation connected');
  }
});

Da poco, spettacoli navigator.onLine lo stesso su tutti i principali browser, ed è quindi utilizzabile. 

if (navigator.onLine) {
  // do things that need connection
} else {
  // do things that don't need connection
}

Le versioni più vecchie che supportano questa nel modo giusto sono: Firefox 41 , IE 9, Chrome 14 e Safari 5.

Al momento questo rappresenterà quasi l'intero spettro di utenti, ma si dovrebbe sempre controllare ciò che gli utenti della vostra pagina hanno delle capacità.

precedente a FF 41, sarebbe mostrare solo false se l'utente ha messo manualmente il browser in modalità non in linea. In IE 8, la proprietà era sul body, invece di window.

fonte: caniuse

navigator.onLine è un casino

mi faccia questo quando si cerca di effettuare una chiamata AJAX al server.

Ci sono diverse situazioni possibili quando il cliente non è in linea:

  • le timouts ajax di chiamata e si riceve l'errore
  • l'Ajax successo chiamata restituisce, ma il msg è nullo
  • la chiamata AJAX non viene eseguito perché il browser decide così (potrebbe essere questo è quando navigator.onLine diventa falso dopo un po ')

La soluzione che sto usando è quello di controllare lo stato me stesso con javascript. Ho impostato la condizione di una chiamata effettuata, in ogni altro caso suppongo che il cliente non è in linea. Qualcosa di simile a questo: 

var offline;
pendingItems.push(item);//add another item for processing
updatePendingInterval = setInterval("tryUpdatePending()",30000);
tryUpdatePending();

    function tryUpdatePending() {

        offline = setTimeout("$('#offline').show()", 10000);
        $.ajax({ data: JSON.stringify({ items: pendingItems }), url: "WebMethods.aspx/UpdatePendingItems", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8",
          success: function (msg) {
            if ((!msg) || msg.d != "ok")
              return;
            pending = new Array(); //empty the pending array
            $('#offline').hide();
            clearTimeout(offline);
            clearInterval(updatePendingInterval);
          }
        });
      }

In HTML5 è possibile utilizzare la proprietà navigator.onLine. Guardate qui:

http://www.w3.org/TR/offline-webapps/# correlato

Probabilmente il tuo comportamento attuale è casuale come il javascript unica pronta la variabile "browser" e poi sa se sei offline e online, ma in realtà non controllare la connessione di rete.

Facci sapere se questo è quello che stai cercando.

Cordiali saluti,

Si prega di trovare i require.js modulo che ho scritto per non in linea. 

define(['offline'], function (Offline) {
    //Tested with Chrome and IE11 Latest Versions as of 20140412
    //Offline.js - http://github.hubspot.com/offline/ 
    //Offline.js is a library to automatically alert your users 
    //when they've lost internet connectivity, like Gmail.
    //It captures AJAX requests which were made while the connection 
    //was down, and remakes them when it's back up, so your app 
    //reacts perfectly.

    //It has a number of beautiful themes and requires no configuration.
    //Object that will be exposed to the outside world. (Revealing Module Pattern)

    var OfflineDetector = {};

    //Flag indicating current network status.
    var isOffline = false;

    //Configuration Options for Offline.js
    Offline.options = {
        checks: {
            xhr: {
                //By default Offline.js queries favicon.ico.
                //Change this to hit a service that simply returns a 204.
                url: 'favicon.ico'
            }
        },

        checkOnLoad: true,
        interceptRequests: true,
        reconnect: true,
        requests: true,
        game: false
    };

    //Offline.js raises the 'up' event when it is able to reach
    //the server indicating that connection is up.
    Offline.on('up', function () {
        isOffline = false;
    });

    //Offline.js raises the 'down' event when it is unable to reach
    //the server indicating that connection is down.
    Offline.on('down', function () {
        isOffline = true;
    });

    //Expose Offline.js instance for outside world!
    OfflineDetector.Offline = Offline;

    //OfflineDetector.isOffline() method returns the current status.
    OfflineDetector.isOffline = function () {
        return isOffline;
    };

    //start() method contains functionality to repeatedly
    //invoke check() method of Offline.js.
    //This repeated call helps in detecting the status.
    OfflineDetector.start = function () {
        var checkOfflineStatus = function () {
            Offline.check();
        };
        setInterval(checkOfflineStatus, 3000);
    };

    //Start OfflineDetector
    OfflineDetector.start();
    return OfflineDetector;
});

Si prega di leggere questo post del blog e fatemi sapere i vostri pensieri. http: // zen -and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Esso contiene un esempio di codice utilizzando offline.js per rilevare quando il cliente non è in linea.

È possibile rilevare offline maniera cross-browser facilmente come qui di seguito 

var randomValue = Math.floor((1 + Math.random()) * 0x10000)

$.ajax({
      type: "HEAD",
      url: "http://yoururl.com?rand=" + randomValue,
      contentType: "application/json",
      error: function(response) { return response.status == 0; },
      success: function() { return true; }
   });

è possibile sostituire yoururl.com da document.location.pathname.

Il punto cruciale della soluzione è, provare a connettersi al tuo nome di dominio, se non si è in grado di connettersi - si è offline. funziona cross browser.

Io uso l'opzione di riserva nella cache di HTML5 manifesta per verificare se il mio HTML5 app è online o offline da: 

FALLBACK:
/online.txt /offline.txt

Nella pagina html che uso javascript tot leggere il contenuto del file online / offline txt: 

<script>$.get( "urlto/online.txt", function( data ) {
$( ".result" ).html( data );
alert( data );
});</script>

Quando collegato lo script leggerà il contenuto del offline.txt. Sulla base del testo nei file è possibile rilevare se la pagina web è in linea di linea.

Ecco la mia soluzione.

Testato con IE, Opera, Chrome, Firefox, Safari, come PhoneGap WebApp su IOS 8 e come PhoneGap WebApp su Android 4.4.2

Questa soluzione non funziona con Firefox su localhost.

=============================================== ==================================

onlineCheck.js (filepath: "root / js / onlineCheck.js): 

var isApp = false;

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    isApp = true;
    }


function isOnlineTest() {
    alert(checkOnline());
}

function isBrowserOnline(no,yes){
    //Didnt work local
    //Need "firefox.php" in root dictionary
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
    xhr.onload = function(){
        if(yes instanceof Function){
            yes();
        }
    }
    xhr.onerror = function(){
        if(no instanceof Function){
            no();
        }
    }
    xhr.open("GET","checkOnline.php",true);
    xhr.send();
}

function checkOnline(){

    if(isApp)
    {
        var xhr = new XMLHttpRequest();
        var file = "http://dexheimer.cc/apps/kartei/neu/dot.png";

        try {
            xhr.open('HEAD', file , false); 
            xhr.send(null);

            if (xhr.status >= 200 && xhr.status < 304) {
                return true;
            } else {
                return false;
            }
        } catch (e) 
        {
            return false;
        }
    }else
    {
        var tmpIsOnline = false;

        tmpIsOnline = navigator.onLine;

        if(tmpIsOnline || tmpIsOnline == "undefined")
        {
            try{
                //Didnt work local
                //Need "firefox.php" in root dictionary
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
                xhr.onload = function(){
                    tmpIsOnline = true;
                }
                xhr.onerror = function(){
                    tmpIsOnline = false;
                }
                xhr.open("GET","checkOnline.php",false);
                xhr.send();
            }catch (e){
                tmpIsOnline = false;
            }
        }
        return tmpIsOnline;

    }
}

=============================================== ==================================

index.html (filepath: "root / index.html"): 

<!DOCTYPE html>
<html>


<head>
    ...

    <script type="text/javascript" src="js/onlineCheck.js" ></script>

    ...

</head>

...

<body onload="onLoad()">

...

    <div onclick="isOnlineTest()">  
        Online?
    </div>
...
</body>

</html>

=============================================== ==================================

checkOnline.php (filepath: "root"): 

<?php echo 'true'; ?>

bene, si può provare il javascript plug-in in grado di monitorare la connessione del browser in tempo reale e avvisa l'utente se internet o la connessione browser con internet è andato giù.

Wiremonkey Javascript plug e la demo potete trovare qui

  

http://ryvan-js.github.io/

Utilizzo di Document Corpo: 

<body ononline="onlineConditions()" onoffline="offlineConditions()">(...)</body>

Utilizzo di JavaScript evento: 

window.addEventListener('load', function() {

  function updateOnlineStatus() {

    var condition = navigator.onLine ? "online" : "offline";
    if( condition == 'online' ){
        console.log( 'condition: online')
    }else{
        console.log( 'condition: offline')
    }

  }

  window.addEventListener('online',  updateOnlineStatus );
  window.addEventListener('offline', updateOnlineStatus );

});

Riferimento :
Documento-Corpo: ononline evento
Javascript-evento: online e eventi offline

Pensieri supplementari:
Per spedire intorno alla "connessione di rete non è la stessa di connessione a Internet" Problema dai metodi di cui sopra: è possibile controllare la connessione Internet una volta con l'Ajax per l'avvio dell'applicazione e configurare una modalità online / offline. Creare un pulsante riconnessione per l'utente di andare online. E aggiungere a ogni richiesta Ajax fallito una funzione che calci la schiena dell'utente in modalità non in linea.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top