Wie erkennt man browserübergreifend Online- / Offline-Ereignisse?

Ich versuche mithilfe der HTML5-Online- und Offline-Ereignisse genau zu erkennen, wann der Browser offline geschaltet wird.

Hier ist mein Code:

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

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

Es funktioniert gut, wenn ich in Firefox oder IE einfach auf "Offline arbeiten" drücke, aber es funktioniert zufällig, wenn ich den Draht tatsächlich abziehe.

Was ist der beste Weg, um diese Änderung zu erkennen? Ich möchte vermeiden, Ajax-Anrufe mit Zeitüberschreitungen zu wiederholen.

Die Browser-Anbieter können sich nicht darauf einigen, wie Offline definiert werden soll. Einige Browser verfügen über eine Offline-Funktion, die sie als getrennt von einem fehlenden Netzwerkzugriff betrachten, der sich wiederum vom Internetzugang unterscheidet. Das Ganze ist ein Chaos. Einige Browser-Anbieter aktualisieren das navigator.onLine-Flag, wenn der tatsächliche Netzwerkzugriff verloren geht, andere nicht.

Aus der Spezifikation:

Gibt false zurück, wenn der Benutzeragent definitiv offline ist (vom Netzwerk getrennt). Gibt true zurück, wenn der Benutzeragent möglicherweise online ist.

Die Ereignisse online und offline werden ausgelöst, wenn sich der Wert dieses Attributs ändert.

Das Attribut navigator.onLine muss false zurückgeben, wenn der Benutzeragent das Netzwerk nicht kontaktiert, wenn der Benutzer Links folgt oder wenn ein Skript eine Remote-Seite anfordert (oder weiß, dass ein solcher Versuch fehlschlagen würde), und muss andernfalls true zurückgeben.

Schließlich stellt die Spezifikation fest:

Dieses Attribut ist von Natur aus unzuverlässig. Ein Computer kann ohne Internetzugang mit einem Netzwerk verbunden werden.

Die wichtigsten Browser-Anbieter unterscheiden sich darin, was "offline" bedeutet.

Chrome und Safari erkennen automatisch, wenn Sie "offline" gehen. Dies bedeutet, dass "online" -Ereignisse und -Eigenschaften automatisch ausgelöst werden, wenn Sie Ihr Netzwerkkabel abziehen.

Firefox (Mozilla), Opera und IE verfolgen einen anderen Ansatz und betrachten Sie als "online", es sei denn, Sie wählen im Browser explizit "Offline-Modus" - auch wenn Sie keine funktionierende Netzwerkverbindung haben.

Es gibt gültige Argumente für das Firefox / Mozilla-Verhalten, die in den Kommentaren dieses Fehlerberichts beschrieben werden:

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

Um die Frage zu beantworten: Sie können sich nicht auf die Online- / Offline-Ereignisse / -Eigenschaft verlassen, um festzustellen, ob tatsächlich eine Netzwerkverbindung besteht.

Stattdessen müssen Sie alternative Ansätze verwenden.

Der Abschnitt "Notizen" dieses Mozilla Developer-Artikels enthält Links zu zwei alternativen Methoden:

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

"Wenn die API nicht im Browser implementiert ist, können Sie mithilfe anderer Signale erkennen, ob Sie offline sind, einschließlich des Abhörens auf AppCache-Fehlerereignisse und Antworten von XMLHttpRequest."

Dies verweist auf ein Beispiel für den Ansatz "Auf AppCache-Fehlerereignisse warten":

http://www.html5rocks.com/de/mobile/workingoffthegrid/#toc-appcache

... und ein Beispiel für den Ansatz "Auf XMLHttpRequest-Fehler warten":

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

HTH, - Tschad

Heute gibt es eine Open-Source-JavaScript-Bibliothek, die diesen Job erledigt: Sie heißt Offline.js.

Zeigen Sie Ihren Benutzern automatisch die Online- / Offline-Anzeige an.

https://github.com/HubSpot/offline

Überprüfen Sie unbedingt die vollständige README-Datei . Es enthält Ereignisse, an die Sie sich anschließen können.

Hier ist eine Testseite . Es ist wunderschön / hat übrigens eine nette Feedback-Benutzeroberfläche! :) :)

Offline.js Simulate UI ist ein Offline.js-Plug-In, mit dem Sie testen können, wie Ihre Seiten auf unterschiedliche Konnektivitätszustände reagieren, ohne Brute-Force-Methoden verwenden zu müssen, um Ihre tatsächliche Konnektivität zu deaktivieren.

Der beste Weg, der jetzt auf allen wichtigen Browsern funktioniert, ist das folgende Skript:

(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;
    }
})();

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

navigator.onLineZeigt seit kurzem das gleiche auf allen gängigen Browsern und ist somit verwendbar.

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

Die ältesten Versionen, die dies richtig unterstützen, sind: Firefox 41 , IE 9, Chrome 14 und Safari 5.

Derzeit wird dies fast das gesamte Benutzerspektrum repräsentieren. Sie sollten jedoch immer überprüfen, welche Funktionen die Benutzer Ihrer Seite haben.

Vor FF 41 wurde nur falseangezeigt , wenn der Benutzer den Browser manuell in den Offline-Modus versetzte. In IE 8 befand sich die Eigenschaft auf der bodystatt window.

Quelle: caniuse

Das window.navigator.onLineAttribut und die damit verbundene Ereignisse sind derzeit nicht zuverlässig auf bestimmtem Web - Browser ( insbesondere Firefox Desktop ) als @Junto sagte, so dass ich eine kleine Funktion (mit jQuery) schrieb , dass in regelmäßigen Abständen die Netzwerkverbindung Status überprüfen und die entsprechenden erhöhen offlineund onlineEreignis:

// 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
      }
    }
  });
}

Sie können es so verwenden:

// 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
}

So hören Sie sich Offline- und Online-Ereignisse an (mithilfe von jQuery):

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

navigator.onLine ist ein Chaos

Ich stelle mich dem, wenn ich versuche, einen Ajax-Anruf an den Server zu tätigen.

Es gibt mehrere mögliche Situationen, in denen der Client offline ist:

• Das Ajax-Anruf-Timeout und Sie erhalten eine Fehlermeldung
• Der Ajax-Aufruf gibt den Erfolg zurück, aber die Nachricht ist null
• Der Ajax-Aufruf wird nicht ausgeführt, weil der Browser dies entscheidet (möglicherweise wird navigator.onLine nach einer Weile falsch).

Die Lösung, die ich verwende, besteht darin, den Status selbst mit Javascript zu steuern. Ich setze die Bedingung für einen erfolgreichen Anruf, in jedem anderen Fall gehe ich davon aus, dass der Client offline ist. Etwas wie das:

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 können Sie die navigator.onLineEigenschaft verwenden. Schau hier:

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

Wahrscheinlich ist Ihr aktuelles Verhalten zufällig, da das Javascript nur die Variable "Browser" bereitstellt und dann weiß, ob Sie offline und online sind, aber die Netzwerkverbindung nicht überprüft.

Lassen Sie uns wissen, ob Sie danach suchen.

Mit freundlichen Grüßen,

Hier finden Sie das Modul require.js, das ich für Offline geschrieben habe.

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;
});

Bitte lesen Sie diesen Blog-Beitrag und teilen Sie mir Ihre Gedanken mit. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Es enthält ein Codebeispiel mit offline.js, um zu erkennen, wann der Client offline ist.

Sie können Offline-Cross-Browser-Weg wie unten leicht erkennen

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; }
   });

Sie können yoururl.com durch ersetzen document.location.pathname.

Der Kern der Lösung besteht darin, eine Verbindung zu Ihrem Domain-Namen herzustellen, wenn Sie keine Verbindung herstellen können - Sie sind offline. funktioniert browserübergreifend.

Ich verwende die Option FALLBACK im HTML5-Cache-Manifest, um zu überprüfen, ob meine HTML5-App online oder offline ist, indem:

FALLBACK:
/online.txt /offline.txt

Auf der HTML-Seite verwende ich Javascript, um den Inhalt der Online / Offline-TXT-Datei zu lesen:

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

Im Offline-Modus liest das Skript den Inhalt der Datei offline.txt. Anhand des Textes in den Dateien können Sie feststellen, ob die Webseite online oder offline ist.

Hier ist meine Lösung.

Getestet mit IE, Opera, Chrome, FireFox, Safari, als Phonegap WebApp unter IOS 8 und als Phonegap WebApp unter Android 4.4.2

Diese Lösung funktioniert nicht mit FireFox auf localhost.

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

onlineCheck.js (Dateipfad: "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 (Dateipfad: "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 (Dateipfad: "root"):

<?php echo 'true'; ?> 

Nun, Sie können das Javascript-Plugin ausprobieren, das die Browserverbindung in Echtzeit überwachen und den Benutzer benachrichtigen kann, wenn das Internet oder die Browserverbindung mit dem Internet unterbrochen wurde.

Wiremonkey Javascript Plugin und die Demo finden Sie hier

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

Dokumentkörper verwenden:

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

Verwenden des Javascript-Ereignisses:

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 );

});

Referenz :
Document-Body: Online-Ereignis
Javascript-Ereignis: Online- und Offline-Ereignisse

Zusätzliche Gedanken:
Um die "Netzwerkverbindung ist nicht dasselbe wie Internetverbindung" zu versenden Problem der oben genannten Methoden: Sie können die Internetverbindung einmal mit Ajax beim Anwendungsstart überprüfen und einen Online- / Offline-Modus konfigurieren. Erstellen Sie eine Schaltfläche zum erneuten Verbinden, damit der Benutzer online gehen kann. Fügen Sie bei jeder fehlgeschlagenen Ajax-Anforderung eine Funktion hinzu, die den Benutzer in den Offline-Modus zurückversetzt.