1

我目前专注于使用 HTML5 的离线 Web 应用程序。我到了需要一种可靠的方法来检查用户的连接以确定他/她目前是在线还是离线的地步。因为我了解到 navigator.onLine 属性非常不可靠，所以我找到了一个非常好的方法，使用缓存清单的后备区域。我从两本不同的书中实现了两种类似的解决方案，一本是“介绍 HTML5”（Lawson/Sharp），另一本是“HTML5：缺失的手册”（MacDonald）。我想这是 HTTP 缓存的问题（我使用 Apache 和 localhost），我对此不太了解。我粘贴了我的代码，它是一些文件，但代码很少。

来自介绍 HTML5 的改编解决方案：http: //pastebin.com/UGsmnAtK

来自 HTML5 的改编解决方案 - 缺少的手册： http: //pastebin.com/8v5ck3E6

用 Chrome 16 测试...

=== 我想要的 ===

  • 使用空缓存启动应用程序并运行 apache
  • 单击按钮-> 显示警报“在线”
  • 停止阿帕奇
  • 单击按钮-> 显示警报“离线”
  • 启动阿帕奇
  • 单击按钮-> 显示警报“在线”

===会发生什么===

介绍 HTML5 解决方案： - 使用空缓存启动应用程序并运行 apache - 单击按钮 -> 显示警报“在线” - 停止 apache - 单击按钮 -> 显示警报“在线” - 启动 apache - 单击按钮 -> 警报显示“在线”

HTML5：缺少的手动解决方案： - 使用空缓存启动应用程序并运行 apache - 单击按钮 -> 显示警报“在线” - 停止 apache - 单击按钮 -> 显示警报“在线” - 启动 apache - 单击按钮-> 显示警报“在线”

其他场景和用例以类似的方式失败。这些书承诺您可以随时使用他们的方法检查用户的连接。所以我想我在这里做错了什么。谢天谢地，我会接受关于这个话题的任何想法。

干杯，菲利克斯

4

1 回答 1

2

问题是当您单击带有介绍 HTML5 的按钮或使用 HTML5 加载页面时加载了 online.js - 缺少手动代码并且该站点可通过 Apache 获得。下次不会加载脚本，因为它已经在浏览器缓存中。

如果您将随机值添加到脚本 URL，则来自Introducing HTML5的 coce看起来应该可以工作。就像是：

function testOnline(fn) {
    var script = document.createElement('script');
    script.src = 'online.js?r=' + Math.random();

    window.setOnline = function(online) {
        document.body.removeChild(script);
        fn(online);
    }

    document.body.appendChild(script);
}
于 2011-12-19T14:22:23.190 回答