我正在测试 HTML5 离线应用程序。为此，我将停止本地 Web 服务器 (IIS) 并打开应用程序。它加载得很好，但是一旦它请求服务器端 API 方法就失败了。
我想防止这种情况发生，而不是 $.get('/api/method') 从我的本地存储中读取数据。但是我可以找到任何工具来了解我的应用程序处于脱机状态。
if (/* online */) {
// fire ajax
} else {
// ask localstorage
}
我尝试使用navigation.onLine，但它似乎总是正确的（至少我可以在 Chrome 中看到）。
你有什么建议吗？
编辑：考虑到当前的答案。应用程序清楚地知道它处于脱机状态，因为它根据 cache.manifest 占用资源。对我来说这很荒谬，客户需要做任何类型的技巧和 ping。我认为应该有一种简单的方法来检查当前模式。
一种简单的检查方法是在清单中添加一个后备部分，如下所示：
FALLBACK
/online.js /offline.js
然后，online.js将全局变量设置为 true，offline.js将其设置为 false，并且online.js只要您计划进行一些网络连接并在回调中有条件地进行所需的任何处理，您只需通过 Ajax 请求即可。同时，维护您所有的应用数据客户端。
在线状态也可以通过超时检查 ajaxHEAD请求，当达到超时（或调用返回错误状态）时，您可以假设您正在离线工作（没有网络能力）并且您必须使用 localstorage
事实上，为了状态的一致性，localstorage 不仅应该在你离线时作为备用，而且在你在线并且特定的ajax 资源暂时不可用（例如站点过载）时也应该使用。当然，您需要定期（或增量）超时对该资源进行连续轮询，直到它再次可用。
我需要相同的功能，经过大量搜索后发现了这个功能：
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;
};
我发现这种技术非常有效。因为请求仅针对标头信息，所以速度相当快，并且适用于所有浏览器。巨大的成功！:)
我希望其他人发现这和我一样有帮助。:)
做一些错误处理怎么样。就像一个 Try Catch 循环。
try {
//Run some code here
}
catch(err) {
//Handle errors here
}
当 ajax 调用失败并出现特定错误（操作超时）时，是否可以选择询问 localstorage？
或者由于页面（至少部分）是使用服务器脚本生成的，因此您可以在页面上使用服务器端脚本包含请求时间戳（或唯一 ID）并将其放入本地存储。然后，您可以通过检查存储的 id 与呈现的 id 来查看页面是否从缓存中加载。
最好的选择可能是使用errorjQuery$.get()函数的事件来查询 localStorage 而不是您的网络服务器。如果您的服务器无法访问以及用户整个互联网无法访问，这具有后退的好处。
$.get({
success: //deal with postback from ajax call,
error: //Whoops no access to server deal with it in a local way
})
似乎现在navigator.onLine正在工作并且可以使用。