Question

我正在测试HTML5离线应用程序。为此，我将停止本地Web服务器（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，只要您计划进行某些联网并执行任何操作，您只需通过Ajax请求online.js在回调中有条件地处理你需要的。在此期间，请维护您的所有应用数据客户端。

另一种方法是a blocking polyfill for navigator.onLine as suggested by Remy Sharp。

Answer 2

还可以检查在线状态，在超时时执行ajax HEAD请求，当达到超时（或者呼叫返回错误状态）时，您可以假设您正在脱机工作（没有网络能力）并且您必须使用localstorage

事实上，为了保持状态一致性，localstorage不仅应该在您离线时使用，而且还应当在您上线时使用特定的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;
  }
}

请注意，上面的代码中包含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;
};

我发现这种技术非常有效。因为请求仅针对标头信息，所以它相当快，并且适用于所有浏览器。巨大的成功！：）

我希望其他人觉得这和我一样有帮助。：）

Answer 4

如何进行一些错误处理。就像Try Catch循环一样。

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

Answer 5

当ajax调用因特定错误（操作超时）失败时，是否可以选择localstorage？

或者由于页面（至少部分地）是使用服务器脚本生成的，因此您可以在页面上包含服务器端脚本的请求时间戳（或唯一ID）并将其放入localstorage。然后，您可以通过检查已呈现的ID来查看是否从缓存加载页面。

Answer 6

最好的选择可能是使用jQuery error函数的$.get()事件来查询localStorage而不是您的网络服务器。如果您的服务器无法访问，以及用户整个互联网无法访问，则可以退回。

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

HTML5 / JS - 检查应用程序是否脱机

6 个答案: