Jak wykryć Zdarzenie online / offline w przeglądarce?

Główni dostawcy przeglądarek różnią się tym, co oznacza" offline".

Chrome i Safari automatycznie wykryją, kiedy będziesz "offline" - co oznacza, że zdarzenia i właściwości "online" będą uruchamiane automatycznie po odłączeniu kabla sieciowego.

Firefox( Mozilla), Opera i IE przyjmują inne podejście i uważają cię za "online", chyba że wyraźnie wybierzesz "tryb Offline" w przeglądarce - nawet jeśli nie masz działającego połączenia sieciowego.

Istnieją ważne argumenty za zachowanie Firefoksa/Mozilli opisane w komentarzach do tego zgłoszenia błędu:

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

Ale, odpowiadając na pytanie - nie możesz polegać na zdarzeniach online/offline / właściwościach, aby wykryć, czy rzeczywiście istnieje łączność sieciowa.

Zamiast tego musisz użyć alternatywnych podejść.

Sekcja "uwagi" tego artykułu dla programistów Mozilli zawiera linki do dwóch alternatywnych metody:

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

"jeśli API nie jest zaimplementowane w przeglądarce, możesz użyć innych sygnałów, aby wykryć, czy jesteś w trybie offline, w tym nasłuchiwać zdarzeń błędów AppCache i odpowiedzi z XMLHttpRequest"

To linki do przykładu podejścia "nasłuchiwanie zdarzeń błędów AppCache":

Http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-appcache

...i przykład podejście "listening for XMLHttpRequest failures":

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

HTH, -- Chad

Dzisiaj istnieje otwarta biblioteka JavaScript, która wykonuje to zadanie: nazywa sięOffline.js.

Automatycznie wyświetla użytkownikom wskazanie online / offline.

Https://github.com/HubSpot/offline

Pamiętaj, aby sprawdzić pełną README . Zawiera zdarzenia, które można zaczepić.

Oto Strona testowa . Jest piękny / ma ładny interfejs opinii przy okazji! :)

Offline.js Simulate UI jest Offline.wtyczka js to pozwala sprawdzić, jak Twoje strony reagują na różne Stany łączności bez konieczności stosowania metod brute-force do wyłącz rzeczywistą łączność.

Najlepszym sposobem, który działa teraz na wszystkich głównych przeglądarkach, jest następujący skrypt:

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

Źródło: http://robertnyman.com/html5/offline/online-offline-events.html

The window.navigator.onLine atrybut i powiązane z nim zdarzenia są obecnie zawodne w niektórych przeglądarkach internetowych ( zwłaszcza Firefox desktop), jak powiedział @ Junto, więc napisałem małą funkcję (używając jQuery), która okresowo sprawdza stan połączenia sieciowego i podnosi odpowiednie offline oraz online Zdarzenie:

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

Możesz go użyć tak:

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

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

Od niedawna, navigator.onLine pokazuje to samo we wszystkich głównych przeglądarkach, a więc jest użyteczny.

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

Najstarsze wersje, które obsługują to we właściwy sposób to: Firefox 41 , IE 9, Chrome 14 i Safari 5.

Obecnie będzie to reprezentować prawie całe spektrum użytkowników, ale zawsze powinieneś sprawdzić, jakie możliwości mają użytkownicy Twojej strony.

Poprzedni FF 41, pokazywałby się tylko {[2] } jeśli użytkownik ręcznie przełączy przeglądarkę w tryb offline. W IE 8, nieruchomość była na body, zamiast window.

Źródło: caniuse

Nawigator.onLine is a mess

Spotykam się z tym, gdy próbuję wykonać połączenie ajax na serwer.

Istnieje kilka możliwych sytuacji, gdy klient jest offline:

• timouts połączeń ajax i otrzymasz błąd
• wywołanie ajax zwraca sukces, ale msg jest null
• wywołanie ajax nie jest wykonywane, ponieważ przeglądarka tak zdecyduje (może być tak, gdy navigator.onLine po pewnym czasie staje się fałszywe)

Rozwiązaniem, którego używam, jest kontrolowanie status ja z javascript. Ustawiam warunek udanego połączenia, w każdym innym przypadku zakładam, że klient jest offline. Coś takiego:

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

W HTML5 możesz użyć właściwości navigator.onLine. Zobacz tutaj:

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

Prawdopodobnie twoje obecne zachowanie jest losowe, ponieważ javascript jest gotowy tylko do zmiennej "browser", a następnie wie, czy jesteś offline i online, ale nie sprawdza połączenia sieciowego.

Z Poważaniem,

Proszę znaleźć wymagania.moduł js, który napisałem dla Offline.

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

Proszę przeczytać ten wpis na blogu i dać mi znać swoje myśli. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html zawiera próbkę kodu używanego w trybie offline.js do wykrywania, gdy klient jest offline.

Używam opcji awaryjnej w manifeście pamięci podręcznej HTML5, aby sprawdzić, czy moja aplikacja html5 jest online lub offline przez:

FALLBACK:
/online.txt /offline.txt

Na stronie html używam javascript tot odczytać zawartość pliku TXT online / offline:

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

W trybie offline skrypt odczyta zawartość trybu offline.txt. Na podstawie tekstu w plikach można wykryć, czy strona jest online lub offline.

Możesz łatwo wykryć offline między przeglądarkami, jak poniżej

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

Możesz zastąpić yoururl.com by document.location.pathname.

Sednem rozwiązania jest to, spróbuj połączyć się z nazwą domeny, jeśli nie możesz się połączyć - jesteś offline. działa między przeglądarkami.

Oto moje rozwiązanie.

To rozwiązanie nie działa z Firefoksem na 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;

    }
}

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

Indeks.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>

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

Linia kontrolna.php (filepath: "root"):

<?php echo 'true'; ?> 

Cóż, możesz wypróbować wtyczkę javascript, która może monitorować połączenie przeglądarki w czasie rzeczywistym i powiadamiać użytkownika, jeśli internet lub połączenie przeglądarek z Internetem padło.

Wtyczka Javascript Wiremonkey a demo znajdziesz tutaj

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

Korzystanie Z Treści Dokumentu:

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

Użycie Zdarzenia Javascript:

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

});

odniesienie:
Document-Body: Ononline Event
Javascript-Event: zdarzenia Online i offline

Dodatkowe Myśli:
Aby wysłać wokół problemu "połączenie sieciowe nie jest takie samo jak połączenie z Internetem" z powyższych metod: można sprawdzić połączenie internetowe raz z ajax na starcie aplikacji i skonfigurować Tryb online / offline. Utwórz przycisk ponownego połączenia, aby użytkownik mógł przejść do trybu online. I dodaj na każdym nieudanym żądaniu ajax funkcję, która kopnie użytkownika z powrotem do trybu offline.

Próbowałeś wykorzystać pracowników serwisu? http://www.html5rocks.com/en/tutorials/service-worker/introduction/