HTML5 / JS - проверьте, что приложение не в сети

Question

Я тестирую автономное приложение HTML5.Для этого я останавливаю свой локальный веб-сервер (IIS) и открываю приложение.Он загружен нормально, но не удалось, как только он запросит метод API на стороне сервера.

Я хочу предотвратить это и вместо $ .get ('/ api / method') читать данные из моего локального хранилища.Но я могу найти любую возможность понять, что мое приложение находится в автономном режиме.

if (/* online */) {
  // fire ajax
} else {
  // ask localstorage
}

Я пытался использовать navigation.onLine, но, похоже, это всегда так (по крайней мере, я вижу это в Chrome).

Есть ли у вас какие-либо предложения?

РЕДАКТИРОВАТЬ : с учетом текущих ответов.Приложение четко понимает, что оно в автономном режиме, так как оно берет ресурсы согласно cache.manifest.Мне смешно, что клиенту нужно делать какие-то трюки и пинги.Я предполагаю, что должен быть простой способ проверить текущий режим.

Answer 1

Один простой способ проверить это добавить запасную секцию в манифест следующим образом:

FALLBACK
/online.js /offline.js

Затем в online.js вы устанавливаете глобальную переменную в true, в offline.js вы устанавливаете ее вfalse, и вы просто запрашиваете online.js от Ajax всякий раз, когда вы планируете выполнить какую-либо работу в сети и выполнить любую обработку, которая вам необходима, в условиях обратного вызова.А пока поддерживайте все данные клиента на стороне вашего приложения.

Альтернативный подход - блокирующий полифилл для navigator.onLine, как это предложено Реми Шарпом .

Answer 2

Онлайн-состояние

также можно проверить с помощью запроса ajax HEAD с тайм-аутом, и когда тайм-аут достигнут (или вызов возвращает состояние ошибки), можно предположить, что вы работаете в автономном режиме (нет сетевых возможностей), и вам необходимо используйте вместо этого localalstorage

Фактически, для обеспечения согласованности состояний локальное хранилище следует использовать в качестве запасного варианта не только в автономном режиме, но и в режиме онлайн, когда определенный ресурс ajax временно не доступен (например, перегрузка сайта). Конечно, вам нужно будет выполнять непрерывный опрос этого ресурса с регулярным (или инкрементным) тайм-аутом, пока он снова не станет доступным.

Answer 3

Мне нужна была та же функциональность, и после долгих поисков я нашел эту функцию:

http://louisremi.com/2011/04/22/navigator-online-alternative-serverreachable/

Вот код из статьи, на случай, если ссылка отключится:

function serverReachable() {
  // IE vs. standard XHR creation
  var x = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" ),
     s;
  x.open(
      // requesting the headers is faster, and just enough
      "HEAD",
      // append a random string to the current hostname,
      // to make sure we're not hitting the cache
      window.location.href.split("?")[0] + "?" + Math.random(),
      // make a synchronous request
      false
  );
  try {
      x.send();
      s = x.status;
      // Make sure the server is reachable
      return ( s >= 200 && s < 300 || s === 304 );
  } 
  // catch network & other problems
  catch (e) {
     return false;
  }
}

Обратите внимание, что приведенный выше код включает исправление Скотта Джела для работы с localhost, которое публикуется ниже в комментариях. А вот ссылка на jQuery-версию той же функции:

https://gist.github.com/scottjehl/947084

И код по этой ссылке:

function serverReachable() {
    var s = $.ajax({
           type: "HEAD",
           url: window.location.href.split("?")[0] + "?" + Math.random(),
           async: false
       }).status;
    return s >= 200 && s < 300 || s === 304;
};

Я нашел эту технику действительно эффективной. Поскольку запрос предназначен только для информации заголовка, он достаточно быстрый и работает во всех браузерах. Огромный успех! :)

Я надеюсь, что другие найдут это столь же полезным, как и я. :)

Answer 4

Лучшим вариантом может быть использование события error функции jQuery $.get() для запроса localStorage, а не вашего веб-сервера. Это дает преимущество в том, что ваш сервер становится недоступным, а также если весь пользовательский интернет недоступен.

$.get({
  success: //deal with postback from ajax call,
  error: //Whoops no access to server deal with it in a local way
})

Answer 5

Можно ли спрашивать у localalstorage, когда при вызове ajax происходит сбой с определенной ошибкой (тайм-аут операции)?

Или, поскольку страница (хотя бы частично) создается с помощью серверного скрипта, вы можете включить метку времени запроса (или уникальный идентификатор) на вашей странице со скриптом на стороне сервера и поместите его в локальное хранилище.Затем вы можете увидеть, загружена ли страница из кэша, проверив сохраненный идентификатор по отображенному.

Answer 6

Как насчет обработки ошибок. Как в цикле Try Catch.

 try {
    //Run some code here
    }
 catch(err) {
    //Handle errors here
    }