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

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

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

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

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

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

EDIT: с учетом текущих ответов. Приложение ясно понимает, что оно отключено, так как оно берет ресурсы в соответствии с cache.manifest. Мне смешно, что клиенту нужно делать какие-то трюки и пинги. Я предполагаю, что должен быть простой способ проверить текущий режим.

Ответ 1

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

FALLBACK
/online.js /offline.js

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

Альтернативным подходом является блокировка polyfill для navigator.onLine, как предложено Remy Sharp.

Ответ 2

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

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

Ответ 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;
  }
}

Обратите внимание, что приведенный выше код содержит исправление Scott Jehl для работы с 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;
};

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

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

Ответ 4

Как сделать обработку ошибок. Как цикл Try Catch.

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

Ответ 5

Можно ли запросить localstorage при сбое аякс-вызова с определенной ошибкой (тайм-аут работы)?

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

Ответ 6

Лучшим вариантом может быть использование события 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
})