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