จะตรวจจับเหตุการณ์ข้ามเบราว์เซอร์ออนไลน์ / ออฟไลน์ได้อย่างไร

ฉันกำลังพยายามตรวจจับอย่างแม่นยำเมื่อเบราว์เซอร์ออฟไลน์โดยใช้ HTML5 เหตุการณ์ออนไลน์และออฟไลน์

นี่คือรหัสของฉัน:

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

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

มันใช้งานได้ดีเมื่อฉันกด "ทำงานออฟไลน์" บน Firefox หรือ IE แต่มันทำงานแบบสุ่มเมื่อฉันถอดปลั๊กจริงๆ

วิธีใดที่ดีที่สุดในการตรวจพบการเปลี่ยนแปลงนี้ ฉันต้องการหลีกเลี่ยงการโทรซ้ำ ๆ ของ ajax ด้วยการหมดเวลา

ผู้จำหน่ายเบราว์เซอร์ไม่สามารถตกลงกันได้ว่าจะกำหนดออฟไลน์อย่างไร เบราว์เซอร์บางตัวมีคุณสมบัติ Work Offline ซึ่งแยกออกจากกันเนื่องจากไม่มีการเข้าถึงเครือข่ายซึ่งแตกต่างจากการเข้าถึงอินเทอร์เน็ต เรื่องทั้งหมดเป็นระเบียบ ผู้จำหน่ายเบราว์เซอร์บางรายอัพเดตแฟล็ก navigator.onLine เมื่อสูญเสียการเข้าถึงเครือข่ายจริง แต่ผู้อื่นไม่ทำ

จากข้อมูลจำเพาะ:

ส่งคืนเท็จหากตัวแทนผู้ใช้ออฟไลน์แน่นอน (ถูกตัดการเชื่อมต่อจากเครือข่าย) ส่งคืนจริงหากตัวแทนผู้ใช้อาจออนไลน์

เหตุการณ์ออนไลน์และออฟไลน์จะเริ่มทำงานเมื่อค่าของแอตทริบิวต์นี้เปลี่ยนไป

แอตทริบิวต์ navigator.onLine ต้องส่งคืนเท็จหากตัวแทนผู้ใช้จะไม่ติดต่อกับเครือข่ายเมื่อผู้ใช้ติดตามลิงก์หรือเมื่อสคริปต์ร้องขอรีโมตเพจ (หรือรู้ว่าความพยายามดังกล่าวจะล้มเหลว) และต้องส่งคืนจริงมิฉะนั้น

สุดท้ายหมายเหตุข้อมูลจำเพาะ:

แอตทริบิวต์นี้ไม่น่าเชื่อถือโดยเนื้อแท้ คอมพิวเตอร์สามารถเชื่อมต่อกับเครือข่ายได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต

ผู้ให้บริการเบราว์เซอร์รายใหญ่แตกต่างกันไปตามความหมายของ "ออฟไลน์"

Chrome และ Safari จะตรวจจับเมื่อคุณ "ออฟไลน์" โดยอัตโนมัติซึ่งหมายความว่าเหตุการณ์และคุณสมบัติ "ออนไลน์" จะเริ่มทำงานโดยอัตโนมัติเมื่อคุณถอดปลั๊กสายเคเบิลเครือข่าย

Firefox (Mozilla), Opera และ IE ใช้แนวทางอื่นและถือว่าคุณ "ออนไลน์" เว้นแต่คุณจะเลือก "โหมดออฟไลน์" อย่างชัดเจนในเบราว์เซอร์แม้ว่าคุณจะไม่มีการเชื่อมต่อเครือข่ายที่ใช้งานได้ก็ตาม

มีข้อโต้แย้งที่ถูกต้องสำหรับพฤติกรรม Firefox / Mozilla ซึ่งระบุไว้ในความคิดเห็นของรายงานข้อบกพร่องนี้:

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

แต่เพื่อตอบคำถามคุณไม่สามารถพึ่งพาเหตุการณ์ / คุณสมบัติออนไลน์ / ออฟไลน์เพื่อตรวจสอบว่ามีการเชื่อมต่อเครือข่ายจริงหรือไม่

แต่คุณต้องใช้วิธีอื่นแทน

ส่วน "หมายเหตุ" ของบทความ Mozilla Developer นี้มีลิงก์ไปยังวิธีการอื่นสองวิธี:

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

"หากไม่ได้ใช้ API ในเบราว์เซอร์คุณสามารถใช้สัญญาณอื่น ๆ เพื่อตรวจจับว่าคุณออฟไลน์หรือไม่รวมถึงการฟังเหตุการณ์ข้อผิดพลาดของ AppCache และการตอบกลับจาก XMLHttpRequest"

ลิงก์นี้ไปยังตัวอย่างของแนวทาง "การฟังเหตุการณ์ข้อผิดพลาด AppCache":

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

... และตัวอย่างของวิธี "การฟังสำหรับ XMLHttpRequest ล้มเหลว":

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

HTH, - ชาด

วันนี้มีห้องสมุด JavaScript Offline.jsที่มาเปิดที่ไม่งานนี้ก็เรียกว่า

แสดงตัวบ่งชี้ออนไลน์ / ออฟไลน์โดยอัตโนมัติให้กับผู้ใช้ของคุณ

https://github.com/HubSpot/offline

โปรดตรวจสอบเต็มREADME มันมีเหตุการณ์ที่คุณสามารถเชื่อมต่อได้

นี่เป็นหน้าทดสอบ มันสวยงาม / มี UI ข้อเสนอแนะที่ดี! :)

Offline.js Simulate UI เป็นปลั๊กอิน Offline.js ที่ให้คุณทดสอบว่าเพจของคุณตอบสนองต่อสถานะการเชื่อมต่อที่แตกต่างกันอย่างไรโดยไม่ต้องใช้วิธี brute-force เพื่อปิดการเชื่อมต่อจริงของคุณ

วิธีที่ดีที่สุดที่ใช้ได้กับเบราว์เซอร์หลักทั้งหมดคือสคริปต์ต่อไปนี้:

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

ที่มา: http://robertnyman.com/html5/offline/online-offline-events.html

เมื่อไม่นานมานี้navigator.onLineแสดงเหมือนกันในเบราว์เซอร์หลักทั้งหมดและสามารถใช้งานได้

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

เวอร์ชันที่เก่าที่สุดที่รองรับสิ่งนี้อย่างถูกต้อง ได้แก่Firefox 41 , IE 9, Chrome 14 และ Safari 5

ปัจจุบันสิ่งนี้จะแสดงถึงผู้ใช้เกือบทั้งหมด แต่คุณควรตรวจสอบอยู่เสมอว่าผู้ใช้ในเพจของคุณมีความสามารถอะไรบ้าง

ก่อนหน้า FF 41 จะแสดงเฉพาะfalseเมื่อผู้ใช้วางเบราว์เซอร์ด้วยตนเองในโหมดออฟไลน์ ใน IE 8 คุณสมบัติจะอยู่บนbodyแทนที่จะเป็นwindow .

ที่มา: caniuse

window.navigator.onLineแอตทริบิวต์และเหตุการณ์ที่เกี่ยวข้องอยู่ในขณะนี้ไม่น่าเชื่อถือบนเว็บเบราว์เซอร์บางอย่าง ( โดยเฉพาะอย่างยิ่ง Firefox สก์ท็อป ) เป็น @Junto กล่าวว่าดังนั้นฉันเขียนฟังก์ชั่นเล็ก ๆ น้อย ๆ (ใช้ jQuery) ที่ระยะตรวจสอบสถานะการเชื่อมต่อเครือข่ายและเพิ่มที่เหมาะสมofflineและonlineเหตุการณ์:

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

คุณสามารถใช้งานได้ดังนี้:

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

หากต้องการฟังกิจกรรมออฟไลน์และออนไลน์ (ด้วยความช่วยเหลือของ 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 เป็นระเบียบ

ฉันเผชิญสิ่งนี้เมื่อพยายามโทร ajax ไปยังเซิร์ฟเวอร์

มีหลายสถานการณ์ที่เป็นไปได้เมื่อไคลเอนต์ออฟไลน์:

• ajax call timouts และคุณได้รับข้อผิดพลาด
• การเรียก ajax ส่งคืนความสำเร็จ แต่ข้อความเป็นโมฆะ
• การเรียก ajax ไม่ได้ดำเนินการเนื่องจากเบราว์เซอร์ตัดสินใจเช่นนั้น (อาจเป็นได้เมื่อ navigator.onLine กลายเป็นเท็จหลังจากนั้นสักครู่)

วิธีแก้ปัญหาที่ฉันใช้คือการควบคุมสถานะด้วยตัวเองด้วยจาวาสคริปต์ ฉันตั้งเงื่อนไขของการโทรที่ประสบความสำเร็จในกรณีอื่นฉันถือว่าไคลเอนต์ออฟไลน์ สิ่งนี้:

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 คุณสามารถใช้navigator.onLineคุณสมบัติ ดูนี่:

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

พฤติกรรมปัจจุบันของคุณอาจเป็นแบบสุ่มเนื่องจากจาวาสคริปต์พร้อมใช้งานเฉพาะตัวแปร "เบราว์เซอร์" จากนั้นจะรู้ว่าคุณออฟไลน์และออนไลน์อยู่หรือไม่ แต่ไม่ได้ตรวจสอบการเชื่อมต่อเครือข่ายจริงๆ

แจ้งให้เราทราบหากนี่คือสิ่งที่คุณกำลังมองหา

ขอแสดงความนับถือ,

โปรดค้นหาโมดูล require.js ที่ฉันเขียนสำหรับ 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;
});

โปรดอ่านโพสต์บล็อกนี้และแจ้งให้เราทราบความคิดของคุณ http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.htmlซึ่งมีตัวอย่างโค้ดที่ใช้ offline.js เพื่อตรวจจับเมื่อไคลเอ็นต์ออฟไลน์

คุณสามารถตรวจจับข้ามเบราว์เซอร์ออฟไลน์ได้อย่างง่ายดายดังด้านล่าง

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 document.location.pathnameโดย

ประเด็นสำคัญของการแก้ปัญหาคือพยายามเชื่อมต่อกับชื่อโดเมนของคุณหากคุณไม่สามารถเชื่อมต่อได้แสดงว่าคุณออฟไลน์อยู่ ทำงานข้ามเบราว์เซอร์

ฉันใช้ตัวเลือก FALLBACK ในรายการแคช HTML5 เพื่อตรวจสอบว่าแอป html5 ของฉันออนไลน์หรือออฟไลน์โดย:

FALLBACK:
/online.txt /offline.txt

ในหน้า html ฉันใช้ javascript tot อ่านเนื้อหาของไฟล์ txt ออนไลน์ / ออฟไลน์:

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

เมื่อออฟไลน์สคริปต์จะอ่านเนื้อหาของ offline.txt ขึ้นอยู่กับข้อความในไฟล์คุณสามารถตรวจจับได้ว่าหน้าเว็บออนไลน์ออฟไลน์หรือไม่

นี่คือทางออกของฉัน

ทดสอบกับ IE, Opera, Chrome, FireFox, Safari เป็น Phonegap WebApp บน IOS 8 และเป็น Phonegap WebApp บน Android 4.4.2

โซลูชันนี้ใช้ไม่ได้กับ FireFox บน 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;

    }
}

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

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 (filepath: "root"):

<?php echo 'true'; ?> 

คุณสามารถลองใช้ปลั๊กอินจาวาสคริปต์ซึ่งสามารถตรวจสอบการเชื่อมต่อเบราว์เซอร์แบบเรียลไทม์และแจ้งให้ผู้ใช้ทราบหากอินเทอร์เน็ตหรือเบราว์เซอร์เชื่อมต่อกับอินเทอร์เน็ตหยุดทำงาน

ปลั๊กอิน Wiremonkey Javascript และการสาธิตที่คุณสามารถพบได้ที่นี่

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

การใช้ตัวเอกสาร:

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

การใช้ Javascript Event:

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

});

การอ้างอิง :
Document-Body: ononline Event
Javascript-Event: เหตุการณ์ออนไลน์และออฟไลน์

ความคิดเพิ่มเติม:
ในการจัดส่ง "การเชื่อมต่อเครือข่ายไม่เหมือนกับการเชื่อมต่ออินเทอร์เน็ต" ปัญหาจากวิธีการข้างต้น: คุณสามารถตรวจสอบการเชื่อมต่ออินเทอร์เน็ตหนึ่งครั้งโดยใช้ ajax ในการเริ่มต้นแอปพลิเคชันและกำหนดค่าโหมดออนไลน์ / ออฟไลน์ สร้างปุ่มเชื่อมต่อใหม่เพื่อให้ผู้ใช้ออนไลน์ และเพิ่มในแต่ละ ajax ที่ล้มเหลวขอฟังก์ชั่นที่เตะผู้ใช้กลับเข้าสู่โหมดออฟไลน์