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

111

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.

Pierre Duplouy
quelle
2
Ich stimme Trefex zu, möchte aber auch hinzufügen, dass die Unterstützung der Verbindungserkennung für die meisten Apps bestenfalls schlecht ist: Nur weil das Kabel abgezogen ist, handelt es sich nicht sofort um einen Verbindungsverlust. Wenn Sie sich auf eine Methode verlassen, die nicht physisch testet, ob die Verbindung offen ist, können Sie keine genauen Ergebnisse garantieren.
Mattbasta
Danke für deinen Rat. Sie würden also die Ajax-Methode empfehlen? dh. XHR-Anrufe mit Timeouts weiter senden?
Pierre Duplouy
Die Implementierung von Firefox (und IE und Opera) ist falsch. Siehe meinen entsprechenden Kommentar hier: bugzilla.mozilla.org/show_bug.cgi?id=654579#c9
thewoolleyman
4
Vielleicht möchten Sie sich Offline.js ansehen , eine Open-Source-Bibliothek, die genau für diesen Zweck erstellt wurde.
Adam

Antworten:

70

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.

Rebecca
quelle
23
Nur Chrome setzt navigator.onLine richtig, wenn die Verbindung unterbrochen wird. Sowohl Safari als auch Firefox setzen das Flag niemals auf false, wenn Sie die Internetverbindung entfernen.
Chovy
2
@chovy und wie wäre es jetzt? Ich habe es kürzlich in Firefox / Chrome getestet und die erwarteten Ergebnisse erhalten, da das Flag gesetzt wird, wenn ich die Internetverbindung ausschalte und einschalte.
James Cazzetta
12
Heute, 31.01.2017, habe ich OSX Chrome 55.0.2883.95, Safari 10.0.3 und FF 50.1.0 geöffnet. Die gesamte window.navigator.onLine scheint hervorragend zu funktionieren, wenn ich in meinem Netzwerk geblieben bin, aber das Kabel von meinem Router entfernt habe. Sie alle wurden offline korrekt erkannt.
Nycynik
3
navigator.onLine wird in allen gängigen
Rafael Lüder
@ RafaelLüder Richtig ab heute, aber diese Antwort wurde im Januar 2011 geschrieben!
Rebecca
34

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

thewoolleyman
quelle
1
Beginnend mit Firefox 41: updates this property when the OS reports a change in network connectivity on Windows, Linux, and OS X.(gemäß den von Ihnen erwähnten Dokumenten). Es ist also nicht nur offline, wenn Sie mit dem Browser "Offline-Modus" surfen
Alter
17

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.

Leniel Maccaferri
quelle
2
Die Bibliothek arbeitet tatsächlich, indem sie wiederholt lokales Favicon unter der Haube abruft. Meiner Meinung nach ist die Bibliothek zu "groß" und hat zu viele Funktionen; Der Haupttrick besteht darin, Favicon wiederholt abzurufen.
Karel Bílek
1
Wird nicht offline erkannt, wenn ich das Netzwerkkabel abziehe
vornehmster
15

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

tmaximini
quelle
3
Da die Kommentare in dem Code selbst klar Zustand - es nicht tut Arbeit in Firefox / Chrome , wenn Sie die Ethernet - Kabel trennen oder WLAN ausschalten.
Manish
Ich habe versucht, den Link "Quelle" zu besuchen und das Ethernet-Kabel zu trennen. Im IE wurde "Sie sind offline" angezeigt, für mich jedoch nicht in Firefox / Chrome (mit der neuesten Version aller Browser). Kann mir etwas fehlen?
Manish
13

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

Haroen Viaene
quelle
11

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');
  }
});
Epoc
quelle
7

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

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,

Trefex
quelle
Vielen Dank für Ihre Hilfe Trefex. Ich habe meinen Code geändert und überprüfe jetzt nur die Eigenschaft navigator.onLine, erhalte jedoch das gleiche Verhalten wie zuvor. Bitte werfen Sie einen Blick auf Mattbastas Kommentar.
Pierre Duplouy
Hallo Pedro, ich stimme mattbasta zu, aber ich hoffte, dass es für Sie funktionieren würde :) Ich würde definitiv die Ajax-Methode verwenden, um eine URL abzufragen, von der Sie wissen, dass sie immer aktiv ist, und dann würden Sie wissen, ob eine Verbindung unterbrochen wird oder nicht. Warum benötigen Sie außerdem die genaue Erkennung des Online- / Offline-Status? Wenn wir mehr wissen würden, gäbe es vielleicht eine andere Lösung für Ihr Problem. Lassen Sie es uns wissen
Trefex
1
Ok, danke :) Ich dachte nur, es wäre besser für den Benutzer, wenn die Anwendung eine Änderung der Konnektivität automatisch erkennen könnte (der Offline-Modus in FF oder IE muss nicht manuell aktiviert werden). Auf diese Weise verwendet die Anwendung, wenn sie offline geschaltet wird, ihren lokalen Cache, anstatt den Server abzufragen. Ich habe diesen Beitrag von John Resig gefunden, der ziemlich genau erklärt, warum dies nicht funktioniert: ejohn.org/blog/offline-events
Pierre Duplouy
Vielen Dank für diesen Blog-Beitrag. Verlassen Sie sich auf eine gründliche Analyse und auf den Punkt. Ich denke, was Sie erreichen möchten, ist es am besten, wenn Sie einen Server (möglicherweise Ihren eigenen) abfragen und dann bei x Zeitüberschreitungen in den lokalen Cache wechseln. Was denken Sie ?
Trefex
Ja, ich denke, das ist die beste Option - angesichts des aktuellen Standes der Technik. Ich hoffe, dass alle Browser den tatsächlichen Verbindungsverlust irgendwann selbst erkennen können: Die Verwendung von navigator.onLine ist ziemlich einfach und sollte nicht komplexer sein. Denkst du nicht?
Pierre Duplouy
3

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.

Srihari Sridharan
quelle
3
Beachten Sie, dass von Antworten nur mit Links abgeraten wird. SO-Antworten sollten der Endpunkt einer Suche nach einer Lösung sein (im Gegensatz zu einem weiteren Zwischenstopp von Referenzen, die im Laufe der Zeit veralten). Bitte fügen Sie hier eine eigenständige Zusammenfassung hinzu, wobei Sie den Link als Referenz behalten.
Kleopatra
Hallo, ich habe das Modul require.js zusammen mit der Linkreferenz veröffentlicht. Danke für den Vorschlag.
Srihari Sridharan
2

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.

harishr
quelle
Da
Manchmal nein, wie die Homepage meiner API ist eine 404
Ben Aubin
Wie ist die Homepage von API wichtig? habe es nicht verstanden. Denn wenn es auf den Server trifft, gibt es keine URL - also keine Verarbeitung, selbst wenn Ihre Homepage 404 ist - spielt es keine Rolle. kann sein, wenn Sie einen Beispielcode bereitstellen können, mit dem ich versuchen kann, das von Ihnen angegebene Problem zu verstehen
harishr
Nicht nur meine APIs, sondern viele Websites haben keine Homepage. Stellen Sie sicher, dass der Statuscode und die empfangenen Daten null sind. Dies ist der beste Weg, um sicherzustellen, dass es sich nicht nur um einen normalen, zu erwartenden Fehler handelt
Ben Aubin,
Mein Webapi hat auch keine Homepage, aber das oben genannte funktioniert immer noch. deshalb bin ich verwirrt. Wie ist die Homepage wichtig, da sie funktioniert
Harishr
2

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.

Marcel Scholte
quelle
0

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'; ?> 
JoJoWhatsUp
quelle
0

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/

Ry Van
quelle
0

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.

Milingu Kilu
quelle
1
Dies funktioniert nicht: window.addEventListener('online', updateOnlineStatus(event) );Sie rufen sofort die Funktion updateOnlineStatus () auf. Es sollte seinwindow.addEventListener('online', updateOnlineStatus );
Sébastien Rosset