Çapraz tarayıcıda çevrimiçi / çevrimdışı olay nasıl tespit edilir?

HTML5 çevrimiçi ve çevrimdışı etkinliklerini kullanarak tarayıcının ne zaman çevrimdışı olduğunu doğru bir şekilde tespit etmeye çalışıyorum.

İşte kodum:

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

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

Firefox veya IE'de "Çevrimdışı çalış" a tıkladığımda iyi çalışıyor, ancak kabloyu gerçekten çıkardığımda biraz rastgele çalışıyor.

Bu değişikliği tespit etmenin en iyi yolu nedir? Zaman aşımları olan ajax çağrılarını tekrarlamaktan kaçınmak istiyorum.

Tarayıcı satıcıları, çevrimdışı tanımlamanın nasıl yapılacağı konusunda anlaşamazlar. Bazı tarayıcılarda, yine internet erişiminden farklı olan ağ erişimi eksikliğinden ayrı olarak değerlendirdikleri bir Çevrimdışı Çalış özelliği vardır. Her şey bir karmaşa. Bazı tarayıcı satıcıları, gerçek ağ erişimi kaybolduğunda navigator.onLine bayrağını güncellerken, diğerleri yapmaz.

Spesifikasyondan:

Kullanıcı aracısı kesinlikle çevrimdışıysa (ağ bağlantısı kesilmişse) yanlış döndürür. Kullanıcı aracısı çevrimiçi olabilirse doğru döndürür.

Çevrimiçi ve çevrimdışı etkinlikler, bu özelliğin değeri değiştiğinde tetiklenir.

Navigator.onLine özniteliği, kullanıcı bağlantıları takip ettiğinde veya bir komut dosyası uzak bir sayfa istediğinde (veya böyle bir girişimin başarısız olacağını bildiğinde) kullanıcı aracısı ağla iletişim kurmazsa yanlış döndürmeli ve aksi takdirde true döndürmelidir.

Son olarak, teknik özellik notları:

Bu özellik doğası gereği güvenilmezdir. Bir bilgisayar, İnternet erişimi olmadan bir ağa bağlanabilir.

Başlıca tarayıcı satıcıları, "çevrimdışı" nın ne anlama geldiği konusunda farklılık gösterir.

Chrome ve Safari, "çevrimdışına" geçtiğinizde otomatik olarak algılayacaktır, yani "çevrimiçi" etkinlikler ve özellikler, ağ kablonuzu çıkardığınızda otomatik olarak tetiklenecektir.

Firefox (Mozilla), Opera ve IE farklı bir yaklaşım benimser ve tarayıcıda açık bir şekilde "Çevrimdışı Mod" u seçmediğiniz sürece - çalışan bir ağ bağlantınız olmasa bile sizi "çevrimiçi" olarak kabul eder.

Bu hata raporunun yorumlarında özetlenen Firefox / Mozilla davranışı için geçerli argümanlar vardır:

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

Ancak soruyu yanıtlamak için - gerçekten ağ bağlantısı olup olmadığını tespit etmek için çevrimiçi / çevrimdışı olaylara / özelliğe güvenemezsiniz.

Bunun yerine, alternatif yaklaşımlar kullanmalısınız.

Bu Mozilla Geliştirici makalesinin "Notlar" bölümü, iki alternatif yönteme bağlantı sağlar:

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

"API tarayıcıda uygulanmamışsa, çevrimdışı olup olmadığınızı tespit etmek için AppCache hata olaylarını ve XMLHttpRequest'ten gelen yanıtları dinlemek dahil olmak üzere diğer sinyalleri kullanabilirsiniz"

Bu, "AppCache hata olaylarını dinleme" yaklaşımının bir örneğine bağlanır:

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

... ve "XMLHttpRequest hatalarını dinleme" yaklaşımına bir örnek:

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

HTH, - Çad

Bugün bu işi yapan açık kaynaklı bir JavaScript kitaplığı var: buna denir Offline.js.

Kullanıcılarınıza çevrimiçi / çevrimdışı göstergeyi otomatik olarak görüntüleyin.

https://github.com/HubSpot/offline

BENİOKU'nun tamamını kontrol ettiğinizden emin olun . Bağlanabileceğiniz olayları içerir.

İşte bir test sayfası . Çok güzel / bu arada güzel bir geri bildirim arayüzüne sahip! :)

Offline.js Simulate UI, gerçek bağlantınızı devre dışı bırakmak için kaba kuvvet yöntemlerini kullanmak zorunda kalmadan sayfalarınızın farklı bağlantı durumlarına nasıl yanıt verdiğini test etmenize olanak tanıyan bir Offline.js eklentisidir.

Şu anda tüm Büyük Tarayıcılarda çalışan en iyi yol aşağıdaki Komut Dosyasıdır:

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

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

Yakın zamandan beri navigator.onLine, tüm büyük tarayıcılarda aynı şeyi gösteriyor ve bu nedenle kullanılabilir.

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

Bunu doğru şekilde destekleyen en eski sürümler şunlardır: Firefox 41 , IE 9, Chrome 14 ve Safari 5.

Şu anda bu, neredeyse tüm kullanıcı yelpazesini temsil edecek, ancak sayfanızın kullanıcılarının neler yapabileceğini her zaman kontrol etmelisiniz.

FF 41'den önce, yalnızca falsekullanıcı tarayıcıyı manuel olarak çevrimdışı moda getirdiğinde gösteriliyordu. IE 8'de mülk body, yerine window.

kaynak: caniuse

window.navigator.onLineNitelik ve ilişkili olaylar, belirli web tarayıcılarının (şu anda güvenilmez özellikle Firefox masaüstü Ben periyodik ağ bağlantı durumunu kontrol edebilir ve uygun düzgün yükseltmek olduğunu (jQuery kullanarak) biraz fonksiyon yazdım, böylece @Junto söylediği gibi) offlineve onlineolay:

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

Bunu şu şekilde kullanabilirsiniz:

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

Çevrimdışı ve çevrimiçi olayları dinlemek için (jQuery yardımıyla):

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

navigator.onLine bir karmaşa

Sunucuya bir ajax araması yapmaya çalışırken bununla karşılaşıyorum.

İstemci çevrimdışıyken birkaç olası durum vardır:

• ajax çağrısı zaman aşımına uğradı ve hata alıyorsunuz
• ajax çağrısı başarı döndürüyor, ancak mesaj boş
• ajax çağrısı, tarayıcı karar verdiği için yürütülmez (bu, navigator.onLine bir süre sonra yanlış hale geldiğinde olabilir)

Kullandığım çözüm, durumu javascript ile kendim kontrol etmektir. Başarılı bir aramanın koşulunu belirledim, diğer durumlarda istemcinin çevrimdışı olduğunu varsayıyorum. Bunun gibi bir şey:

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

HTML5'te navigator.onLineözelliği kullanabilirsiniz . Buraya bak:

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

Muhtemelen şu anki davranışınız rastgeledir, çünkü javascript yalnızca "tarayıcı" değişkenini hazırlar ve sonra çevrimdışı ve çevrimiçi olup olmadığınızı anlar, ancak aslında Ağ Bağlantısını kontrol etmez.

Aradığınız buysa bize bildirin.

Saygılarımla,

Lütfen Çevrimdışı için yazdığım require.js modülünü bulun.

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

Lütfen bu blog yazısını okuyun ve düşüncelerinizi bana bildirin. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html İstemcinin çevrimdışı olduğunu algılamak için offline.js kullanan bir kod örneği içerir.

Çevrimdışı tarayıcılar arası yolu aşağıdaki gibi kolayca tespit edebilirsiniz

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

yoururl.com'u ile değiştirebilirsiniz document.location.pathname.

Çözümün püf noktası, eğer bağlanamıyorsanız, alan adınıza bağlanmayı deneyin - çevrimdışısınız. tarayıcılar arası çalışır.

Html5 uygulamamın çevrimiçi mi yoksa çevrimdışı mı olduğunu kontrol etmek için HTML5 önbellek bildiriminde FALLBACK seçeneğini kullanıyorum:

FALLBACK:
/online.txt /offline.txt

Html sayfasında, çevrimiçi / çevrimdışı txt dosyasının içeriğini okumak için javascript kullanıyorum:

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

Çevrimdışıyken komut dosyası offline.txt'nin içeriğini okuyacaktır. Dosyalardaki metne bağlı olarak, web sayfasının çevrim içi mi yoksa çevrim dışı mı olduğunu tespit edebilirsiniz.

İşte benim çözümüm.

IE, Opera, Chrome, FireFox, Safari ile IOS 8'de Phonegap WebApp olarak ve Android 4.4.2'de Phonegap WebApp olarak test edilmiştir

Bu çözüm localhost'ta FireFox ile çalışmıyor.

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

onlineCheck.js (dosya yolu: "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 (dosya yolu: "kök"):

<?php echo 'true'; ?> 

Peki, tarayıcı bağlantısını gerçek zamanlı olarak izleyebilen ve internet veya tarayıcıların internet bağlantısı kesildiğinde kullanıcıyı bilgilendiren javascript eklentisini deneyebilirsiniz.

Wiremonkey Javascript eklentisi ve burada bulabileceğiniz demo

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

Belge Gövdesini Kullanma:

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

Javascript Olayını Kullanma:

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

});

Referans :
Belge Gövdesi: çevrimiçi Etkinlik
Javascript Etkinliği: Çevrimiçi ve çevrimdışı etkinlikler

Ek Düşünceler:
"Ağ bağlantısı internet bağlantısı ile aynı değildir" etrafında dolaşmak için Yukarıdaki yöntemlerden problem: Uygulama başlangıcında ajax ile internet bağlantısını bir kez kontrol edebilir ve bir çevrimiçi / çevrimdışı mod yapılandırabilirsiniz. Kullanıcının çevrimiçi olması için bir yeniden bağlan düğmesi oluşturun. Ve başarısız olan her ajax isteğine, kullanıcıyı çevrimdışı moda geri döndüren bir işlev ekleyin.