it-swarm.com.de

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

Ich versuche genau zu erkennen, wann der Browser offline geht, und zwar mit den Online- und Offline-Ereignissen von HTML5.

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 nur auf "Offline arbeiten" klicke, aber es funktioniert irgendwie zufällig, wenn ich tatsächlich den Draht abziehe. 

Wie erkennt man diese Änderung am besten? Ich möchte vermeiden, Ajax-Anrufe mit Timeouts zu wiederholen.

95
Pierre Duplouy

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

Aus der Spezifikation:

Gibt false zurück, wenn der Benutzeragent .__ ist. definitiv offline (getrennt von des Netzwerks). Gibt "true" zurück, wenn der Benutzer Agent könnte online sein.

Die Ereignisse online und offline sind Wird ausgelöst, wenn der Wert dieses Attributs Änderungen.

Das navigator.onLine-Attribut muss Gibt false zurück, wenn der Benutzeragent Kontaktieren Sie das Netzwerk nicht, wenn der Benutzer folgt Links oder wenn ein Skript fordert eine Remote-Seite an (oder weiß, dass ein solcher Versuch fehlschlagen würde) und muss sonst wahr zurückgeben.

Zum Schluss noch die Spezifikation:

Dieses Attribut ist inhärent unzuverlässig. Ein Computer kann .__ sein. verbunden mit einem Netzwerk ohne Internet Zugang.

62
Rebecca

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 verwenden einen anderen Ansatz und betrachten Sie als "online", wenn Sie nicht explizit "Offline-Modus" im Browser auswählen - selbst wenn Sie keine Netzwerkverbindung haben.

Es gibt gültige Argumente für das Verhalten von Firefox/Mozilla, 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 darauf verlassen, dass die Online-/Offline-Ereignisse Eigenschaft ermittelt, ob tatsächlich eine Netzwerkverbindung besteht.

Stattdessen müssen Sie alternative Ansätze verwenden.

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

/ - https://developer.mozilla.org/de/Online_und_offline_events

"Wenn die API nicht im Browser implementiert ist, können Sie andere Signale verwenden, um zu ermitteln, ob Sie offline sind, einschließlich AppCache-Fehlerereignissen und Antworten von XMLHttpRequest."

Hier finden Sie 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, - Chad

31
thewoolleyman

Heute gibt es eine Open-Source-JavaScript-Bibliothek, die diese Aufgabe erfüllt: Sie heißt Offline.js .

Automatisches Anzeigen der Online-/Offline-Anzeige für Ihre Benutzer.

https://github.com/HubSpot/offline

Achten Sie darauf, die vollständige README zu überprüfen. Es enthält Ereignisse, an die Sie sich anschließen können.

Hier ist eine Testseite . Es ist schön/hat eine schöne Rückmeldung UI übrigens! :)

Offline.js Simulate UI ist ein Offline.js-Plug-In So können Sie testen, wie Ihre Seiten auf verschiedene .__ reagieren. Konnektivitätszustände, ohne brute-force-Methoden verwenden zu müssen, um Deaktivieren Sie Ihre tatsächliche Verbindung.

17

Der beste Weg, der jetzt auf allen gängigen 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

15
tmaximini

Seit kurzem zeigt navigator.onLine dasselbe 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 auf die richtige Weise unterstützen, sind: Firefox 41 , IE 9, Chrome 14 und Safari 5. 

Derzeit wird dies fast das gesamte Spektrum der Nutzer darstellen. Sie sollten jedoch immer überprüfen, welche Möglichkeiten die Nutzer Ihrer Seite haben.

Vor FF 41 würde es nur false anzeigen, wenn der Benutzer den Browser manuell in den Offline-Modus versetzt. In IE 8 befand sich die Eigenschaft auf body anstelle von window.

quelle: caniuse

8
Haroen Viaene

Das Attribut window.navigator.onLine und die zugehörigen Ereignisse sind derzeit auf bestimmten Webbrowsern ( insbesondere Firefox-Desktop ) nicht zuverlässig, wie @Junto sagte. Daher schrieb ich eine kleine Funktion (mit jQuery), die regelmäßig den Netzwerkverbindungsstatus und prüft Erzeuge das entsprechende offline und online event:

// 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 die Offline- und Online-Events (mit Hilfe von jQuery) ab:

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

navigator.onLine ist ein Durcheinander

Ich stehe vor diesem Problem, wenn ich versuche, den Server mit Ajax anzurufen.

Es gibt verschiedene Situationen, in denen der Client offline ist: 

  • die ajax call timouts und sie erhalten fehler
  • der Ajax-Aufruf gibt Erfolg zurück, aber die msg ist null
  • der Ajax-Aufruf wird nicht ausgeführt, weil der Browser dies entscheidet (möglicherweise wird navigator.onLine nach einiger Zeit falsch).

Die Lösung, die ich verwende, ist, den Status selbst mit Javascript zu kontrollieren. Ich setze die Bedingung für einen erfolgreichen Anruf, in allen anderen Fällen gehe ich davon aus, dass der Client offline ist.

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

In HTML5 können Sie die navigator.onLine-Eigenschaft verwenden. Schau hier:

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

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

Lassen Sie uns wissen, ob Sie danach suchen.

Mit freundlichen Grüßen,

5
Trefex

Hier finden Sie das von mir für Offline geschriebene Requis.js-Modul.

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 Blogbeitrag und lassen Sie mich Ihre Gedanken wissen. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Es enthält ein Codebeispiel, in dem offline.js verwendet wird, um festzustellen, wann Client ist offline.

2

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

FALLBACK:
/online.txt /offline.txt

In 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>

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

2
Marcel Scholte

sie können Offline-Cross-Browser auf einfache Weise wie unten 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 document.location.pathname ersetzen.

Der Kernpunkt der Lösung ist, versuchen Sie, eine Verbindung zu Ihrem Domänennamen herzustellen, wenn Sie keine Verbindung herstellen können - Sie sind offline. arbeitet über Browser.

1
harishr

Dokumentenkörper verwenden:

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

Javascript verwenden:

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

  function updateOnlineStatus(event) {

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

  }

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

});

Referenz:
Dokumenttext: Online-Ereignis
Javascript-Event: Online- und Offline-Events

Zusätzliche Gedanken:
Versand um die "Netzwerkverbindung ist nicht das Gleiche wie eine Internetverbindung" Problem mit den oben genannten Methoden: Sie können die Internetverbindung einmal mit ajax beim Start der Anwendung überprüfen und einen Online/Offline-Modus konfigurieren. Erstellen Sie eine Schaltfläche zum erneuten Verbinden, über die der Benutzer online gehen kann. Fügen Sie bei jeder fehlgeschlagenen Ajax-Anforderung eine Funktion hinzu, die den Benutzer zurück in den Offline-Modus versetzt.

0
Milingu Kilu

Hier ist meine Lösung.

Getestet mit IE, Opera, Chrome, FireFox, Safari, als Phonegap WebApp auf IOS 8 und als Phonegap WebApp auf 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'; ?> 
0
JoJoWhatsUp

nun, Sie können das Javascript-Plugin ausprobieren, das die Browser-Verbindung in Echtzeit überwachen kann und den Benutzer benachrichtigt, wenn das Internet oder die Browser-Verbindung mit dem Internet unterbrochen wurde.

Wiremonkey Javascript plugin Und die Demo finden Sie hier

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

0
Ry Van