Как определить кроссбраузерность онлайн/оффлайн событий?

В настоящее время в 2011 году различные поставщики браузеров не могут договориться о том, как определить автономный режим. В некоторых браузерах есть функция «Работать автономно», которую они считают отдельной от отсутствия доступа к сети, что опять же отличается от доступа в Интернет. Все дело в беспорядке. Некоторые поставщики браузеров обновляют флаг navigator.onLine при потере фактического доступа к сети, другие — нет.

Из спецификации:

Возвращает false, если пользовательский агент определенно находится в автономном режиме (отключен от сети). Возвращает true, если пользовательский агент может быть в сети.

События онлайн и офлайн запускаются при изменении значения этого атрибута.

Атрибут navigator.onLine должен возвращать false, если пользовательский агент не будет связываться с сетью, когда пользователь переходит по ссылкам или когда скрипт запрашивает удаленную страницу (или знает, что такая попытка не удастся), в противном случае должен возвращать true.

Наконец, спецификация отмечает:

Этот атрибут по своей сути ненадежен. Компьютер может быть подключен к сети без доступа в Интернет.

Основные поставщики браузеров расходятся во мнениях относительно того, что означает автономный режим.

Chrome, Safari и Firefox (начиная с версии 41) автоматически определяют, когда вы выходите из сети, а это означает, что онлайн-события и свойства запускаются автоматически, когда вы отключаете сетевой кабель.

Mozilla Firefox (до версии 41), Opera и IE используют другой подход и считают, что вы подключены к сети, если вы явно не выберете автономный режим в браузере, даже если у вас нет рабочего сетевого подключения.

Существуют веские аргументы в пользу поведения Firefox/Mozilla, которые изложены в комментариях к этому отчету об ошибке:

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

Но, чтобы ответить на вопрос, вы не можете полагаться на события/свойство онлайн/офлайн, чтобы определить, действительно ли существует сетевое подключение.

Вместо этого вы должны использовать альтернативные подходы.

Раздел «Примечания» этой статьи для разработчиков Mozilla содержит ссылки на два альтернативных метода:

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. Он содержит события, к которым вы можете подключиться.

Вот тестовая страница. Кстати, это красиво / имеет приятный интерфейс обратной связи! :)

Offline.js Simulate UI — это подключаемый модуль Offline.js, который позволяет вам проверить, как ваши страницы реагируют на различные состояния подключения, без необходимости использовать методы грубой силы для отключения фактического подключения.

Лучший способ, который сейчас работает во всех основных браузерах, — это следующий скрипт:

(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

Примечание от 23 июня 2021 г.

Как вы можете видеть в Могу ли я использовать, встроенная поддержка этой функции значительно улучшилась за последние годы, так как основные ошибки были устранены. Хакерские вещи ниже больше не нужны.

Атрибут window.navigator.onLine и связанные с ним события в настоящее время ненадежны. в некоторых веб-браузерах (особенно Firefox для настольных компьютеров), как сказал @Junto, поэтому я написал немного функция (использующая jQuery), которая периодически проверяет состояние подключения к сети и вызывает соответствующий offline и события online:

// Global variable somewhere in your app to replicate the 
// window.navigator.onLine variable (this last 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, и вы получаете сообщение об ошибке
• вызов ajax возвращает успех, но сообщение равно null
• вызов ajax не выполняется, потому что так решил браузер (может быть, это когда navigator.onLine через некоторое время становится ложным)

Решение, которое я использую, состоит в том, чтобы самостоятельно контролировать статус с помощью javascript. Ставлю условие успешного звонка, в любом другом случае считаю, что клиент офлайн. Что-то вроде этого:

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 для чтения содержимого онлайн/оффлайн файла txt:

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

В автономном режиме скрипт будет читать содержимое файла offline.txt. На основе текста в файлах вы можете определить, находится ли веб-страница в сети или в автономном режиме.

Вот мое решение.

Протестировано с IE, Opera, Chrome, FireFox, Safari, как веб-приложение Phonegap на IOS 8 и как веб-приложение Phonegap на Android 4.4.2

Это решение не работает с FireFox на локальном хосте.

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

onlineCheck.js (путь к файлу: "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 (путь к файлу: "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 (путь к файлу: «root»):

<?php echo 'true'; ?> 

ну, вы можете попробовать плагин javascript, который может отслеживать соединение браузера в режиме реального времени и уведомляет пользователя, если Интернет или соединение браузера с Интернетом прервалось.

плагин Wiremonkey Javascript и демо можно найти здесь

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

Использование тела документа:

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

Использование события 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 );

});

Ссылка:
Основная часть документа: онлайн-мероприятие
Javascript-Event: Онлайн- и офлайн-события

Дополнительные мысли:
Чтобы обойти "сетевое соединение не то же самое, что подключение к Интернету" Проблема из приведенных выше методов: вы можете проверить подключение к Интернету один раз с помощью ajax при запуске приложения и настроить онлайн/оффлайн режим. Создайте кнопку повторного подключения, чтобы пользователь мог выйти в сеть. И добавьте к каждому неудачному ajax-запросу функцию, которая возвращает пользователя в автономный режим.