Làm thế nào để phát hiện sự kiện trực tuyến / ngoại tuyến trên nhiều trình duyệt?

Tôi đang cố gắng phát hiện chính xác thời điểm trình duyệt ngoại tuyến, sử dụng các sự kiện trực tuyến và ngoại tuyến HTML5.

Đây là mã của tôi:

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

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

Nó hoạt động tốt khi tôi chỉ nhấn "Làm việc ngoại tuyến" trên Firefox hoặc IE, nhưng nó hoạt động ngẫu nhiên khi tôi thực sự rút dây.

Cách tốt nhất để phát hiện thay đổi này là gì? Tôi muốn tránh lặp lại các cuộc gọi ajax với thời gian chờ.

Các nhà cung cấp trình duyệt không thể thống nhất về cách xác định ngoại tuyến. Một số trình duyệt có tính năng Làm việc Ngoại tuyến, tính năng này được coi là tách biệt với tình trạng thiếu truy cập mạng, lại khác với tính năng truy cập internet. Toàn bộ là một mớ hỗn độn. Một số nhà cung cấp trình duyệt cập nhật cờ Navigator.onLine khi quyền truy cập mạng thực tế bị mất, những nhà cung cấp khác thì không.

Từ thông số kỹ thuật:

Trả về false nếu tác nhân người dùng chắc chắn ngoại tuyến (bị ngắt kết nối khỏi mạng). Trả về true nếu tác nhân người dùng có thể trực tuyến.

Các sự kiện trực tuyến và ngoại tuyến được kích hoạt khi giá trị của thuộc tính này thay đổi.

Thuộc tính Navigator.onLine phải trả về false nếu tác nhân người dùng sẽ không liên hệ với mạng khi người dùng truy cập các liên kết hoặc khi tập lệnh yêu cầu một trang từ xa (hoặc biết rằng nỗ lực như vậy sẽ không thành công) và phải trả về true nếu không.

Cuối cùng, thông số kỹ thuật ghi chú:

Thuộc tính này vốn không đáng tin cậy. Máy tính có thể được kết nối với mạng mà không cần truy cập Internet.

Các nhà cung cấp trình duyệt chính khác nhau về nghĩa "ngoại tuyến".

Chrome và Safari sẽ tự động phát hiện khi bạn chuyển sang "ngoại tuyến" - nghĩa là các sự kiện và thuộc tính "trực tuyến" sẽ tự động kích hoạt khi bạn rút cáp mạng của mình.

Firefox (Mozilla), Opera và IE có cách tiếp cận khác và coi bạn là "trực tuyến" trừ khi bạn chọn rõ ràng "Chế độ ngoại tuyến" trong trình duyệt - ngay cả khi bạn không có kết nối mạng đang hoạt động.

Có các đối số hợp lệ cho hành vi Firefox / Mozilla, được nêu trong các nhận xét của báo cáo lỗi này:

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

Tuy nhiên, để trả lời câu hỏi - bạn không thể dựa vào các sự kiện / thuộc tính trực tuyến / ngoại tuyến để phát hiện xem có thực sự kết nối mạng hay không.

Thay vào đó, bạn phải sử dụng các cách tiếp cận thay thế.

Phần "Ghi chú" của bài viết dành cho Nhà phát triển Mozilla này cung cấp các liên kết đến hai phương pháp thay thế:

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

"Nếu API không được triển khai trong trình duyệt, bạn có thể sử dụng các tín hiệu khác để phát hiện xem bạn có ngoại tuyến hay không, bao gồm lắng nghe các sự kiện và phản hồi lỗi AppCache từ XMLHttpRequest"

Điều này liên kết đến một ví dụ về phương pháp tiếp cận "lắng nghe các sự kiện lỗi AppCache":

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

... và một ví dụ về phương pháp "lắng nghe lỗi XMLHttpRequest":

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

HTH, - Chad

Ngày nay có một thư viện JavaScript mã nguồn mở thực hiện công việc này: nó được gọi là Offline.js.

Tự động hiển thị chỉ báo trực tuyến / ngoại tuyến cho người dùng của bạn.

https://github.com/HubSpot/offline

Hãy chắc chắn để kiểm tra README đầy đủ . Nó chứa các sự kiện mà bạn có thể tham gia.

Đây là một trang thử nghiệm . Nhân tiện, nó đẹp / có một giao diện người dùng phản hồi tốt! :)

Offline.js Simulate UI là một plug-in Offline.js cho phép bạn kiểm tra cách các trang của bạn phản ứng với các trạng thái kết nối khác nhau mà không cần phải sử dụng các phương pháp brute-force để tắt kết nối thực của bạn.

Cách tốt nhất hiện hoạt động trên tất cả các Trình duyệt chính là Tập lệnh sau:

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

Nguồn: http://robertnyman.com/html5/offline/online-offline-events.html

Kể từ gần đây, navigator.onLinehiển thị giống nhau trên tất cả các trình duyệt chính và do đó có thể sử dụng được.

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

Các phiên bản cũ nhất hỗ trợ điều này đúng cách là: Firefox 41 , IE 9, Chrome 14 và Safari 5.

Hiện tại, điều này sẽ đại diện cho gần như toàn bộ phạm vi người dùng, nhưng bạn nên luôn kiểm tra xem người dùng trang của bạn có khả năng gì.

Trước FF 41, nó sẽ chỉ hiển thị falsenếu người dùng đặt trình duyệt theo cách thủ công ở chế độ ngoại tuyến. Trong IE 8, thuộc tính nằm trên body, thay vìwindow .

nguồn: caniuse

Các window.navigator.onLinethuộc tính và sự kiện đi kèm của nó là hiện không đáng tin cậy trên các trình duyệt web nào đó ( đặc biệt là Firefox desktop ) như @Junto nói, vì vậy tôi đã viết một hàm nhỏ (sử dụng jQuery) mà định kỳ kiểm tra tình trạng kết nối mạng và nâng cao thích hợp offlinevà onlinesự kiện:

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

Bạn có thể sử dụng nó như thế này:

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

Để nghe các sự kiện ngoại tuyến và trực tuyến (với sự trợ giúp của 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 là một mớ hỗn độn

Tôi phải đối mặt với điều này khi cố gắng thực hiện cuộc gọi ajax tới máy chủ.

Có một số tình huống có thể xảy ra khi máy khách ngoại tuyến:

• cuộc gọi ajax timouts và bạn nhận được lỗi
• lệnh gọi ajax trả về thành công, nhưng tin nhắn là null
• lệnh gọi ajax không được thực thi vì trình duyệt quyết định như vậy (có thể đây là khi điều hướng.onLine trở thành sai sau một thời gian)

Giải pháp tôi đang sử dụng là tự kiểm soát trạng thái bằng javascript. Tôi đặt điều kiện cuộc gọi thành công, trong mọi trường hợp khác, tôi cho rằng khách hàng đang ngoại tuyến. Một cái gì đó như thế này:

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

Trong HTML5, bạn có thể sử dụng thuộc navigator.onLinetính. Nhìn đây:

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

Có thể hành vi hiện tại của bạn là ngẫu nhiên vì javascript chỉ sẵn sàng biến "browser" và sau đó biết bạn đang ngoại tuyến và trực tuyến, nhưng nó không thực sự kiểm tra Kết nối mạng.

Hãy cho chúng tôi biết nếu đây là những gì bạn đang tìm kiếm.

Trân trọng,

Vui lòng tìm mô-đun request.js mà tôi đã viết cho Ngoại tuyến.

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

Hãy đọc bài đăng trên blog này và cho tôi biết suy nghĩ của bạn. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Nó chứa một mẫu mã sử dụng offline.js để phát hiện khi máy khách ngoại tuyến.

bạn có thể phát hiện trình duyệt chéo ngoại tuyến một cách dễ dàng như bên dưới

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

bạn có thể thay thế yoururl.com bằng document.location.pathname.

Điểm mấu chốt của giải pháp là cố gắng kết nối với tên miền của bạn, nếu bạn không thể kết nối - bạn đang ngoại tuyến. hoạt động trên nhiều trình duyệt.

Tôi sử dụng tùy chọn FALLBACK trong tệp kê khai bộ đệm HTML5 để kiểm tra xem ứng dụng html5 của tôi đang trực tuyến hay ngoại tuyến bằng cách:

FALLBACK:
/online.txt /offline.txt

Trong trang html, tôi sử dụng javascript để đọc nội dung của tệp txt trực tuyến / ngoại tuyến:

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

Khi ngoại tuyến, script sẽ đọc nội dung của offline.txt. Dựa vào văn bản trong tệp, bạn có thể phát hiện xem trang web có trực tuyến ngoại tuyến hay không.

Đây là giải pháp của tôi.

Đã thử nghiệm với IE, Opera, Chrome, FireFox, Safari, dưới dạng Phonegap WebApp trên IOS 8 và dưới dạng Phonegap WebApp trên Android 4.4.2

Giải pháp này không hoạt động với FireFox trên localhost.

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

onlineCheck.js (đường dẫn tệp: "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 (đường dẫn tệp: "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'; ?> 

tốt, bạn có thể thử plugin javascript có thể giám sát kết nối trình duyệt trong thời gian thực và thông báo cho người dùng nếu kết nối internet hoặc trình duyệt với internet bị lỗi.

Plugin Wiremonkey Javascript và bản demo bạn có thể tìm thấy tại đây

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

Sử dụng Nội dung Tài liệu:

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

Sử dụng Sự kiện Javascript:

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

});

Tham khảo :
Document-Body: ononline Event
Javascript-Event: Các sự kiện trực tuyến và ngoại tuyến

Suy nghĩ bổ sung:
Để giải quyết vấn đề "kết nối mạng không giống như kết nối internet" từ các phương pháp trên: Bạn có thể kiểm tra kết nối internet một lần với ajax khi khởi động ứng dụng và định cấu hình chế độ trực tuyến / ngoại tuyến. Tạo nút kết nối lại để người dùng trực tuyến. Và thêm vào mỗi yêu cầu ajax không thành công một chức năng đưa người dùng trở lại chế độ ngoại tuyến.