HTML5：使用清单回退来检查用户的连接

Question

我目前专注于 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
• 单击按钮 ->显示警报“在线”
• 停止 apache
• 单击按钮 ->显示警报“离线”
• 启动 apache
• 单击按钮 ->显示“在线”警报

=== 发生了什么 ===

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

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

其他场景和用例以类似的方式失败。这些书承诺您可以使用他们的方法随时检查用户的连接情况。所以我想我在这里做错了什么。我很高兴接受有关这个主题的任何想法。

干杯， 菲利克斯

Answer 1

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

Introducing HTML5 中的 coce 看起来如果您向脚本 URL 添加随机值，它应该可以工作。像这样的东西：

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