为什么离线 Web 应用程序不起作用？答案

【问题标题】：Why offline web application doesn't work?为什么离线 Web 应用程序不起作用？
【发布时间】：2014-07-04 14:09:55
【问题描述】：

看起来大多数浏览器都支持offline app。我从WHATWG 复制了示例应用程序并将其放在网络服务器上，但是当我使用以下步骤进行测试时它不起作用：

使用 windows phone 8.1 (IE 11) 浏览至 clock.html
页面看起来不错，然后退出浏览器
禁用 wifi 和手机数据
再次浏览clock.html，但得到Cannot find server or DNS error

我没有在隐私模式下浏览，也没有清除任何浏览器缓存。我不知道这是否特定于 windows phone，但稍后将在其他设备上进行测试。

clock.appcache

CACHE MANIFEST
CACHE:
clock.html
clock.css
clock.js

clock.html

<!DOCTYPE html>
<html manifest="clock.appcache">
<head>
    <title>Clock</title>
    <script src="clock.js"></script>
    <link rel="stylesheet" href="clock.css">
</head>

<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
    <div>The network is: <span id="indicator">(state unknown)</span></div>
    <div>The time is: <span id="clock"></span></div>
</body>

</html>

时钟.css

.clock { font: 2em sans-serif; }

clock.js

setInterval(function () {
    document.getElementById('clock').innerHTML = new Date();
}, 1000);

function updateIndicator() {
    document.getElementById('indicator').innerHTML = navigator.onLine ? 'online' : 'offline';
}

【问题讨论】：

标签： html html5-appcache cache-manifest

【解决方案1】：

我已经构建了一个使用这种技术的离线应用程序，并且在每个浏览器中都能正常运行，但是我在 Windows Phone 8.1 上的 IE11 上也遇到了与您相同的问题。我在这里写过这个问题：http://forums.wpcentral.com/windows-phone-8-1-preview-developers/274574-91.htm#post2585711

如果您加载页面，进入飞行模式，然后点击刷新，您会收到提到的 DNS 错误（当您希望浏览器从缓存加载页面时）。

我找到了一种解决方法 - 加载页面，将其添加为书签（如果需要，还可以固定到主页），退出浏览器，进入飞行模式，然后重新打开浏览器并使用加载页面仅限您的书签。它应该可以加载站点。只是不要点击刷新 - 它似乎是杀死它的刷新功能。

【讨论】：

解决方法不起作用。只要我在离线期间不刷新它就可以正常加载，即使在离线期间刷新后从书签加载，它也不会再工作了。
我想你已经描述了和我一样的过程 - 基本上它使用刷新似乎会破坏它。

【解决方案2】：

clock.appcache 需要使用正确的 mime 类型 text/cache-manifest。大多数服务器默认情况下不这样做。您需要使用正确的设置修改 web.config 或 .htaccess。

IIShttps://stackoverflow.com/a/7118481/195050

阿帕奇https://stackoverflow.com/a/3281574/195050

【讨论】：

离线时，刷新页面会再次出现同样的错误。任何想法如何解决这个问题？
@RayCheng 可能是缓存头。 no-store 会引起问题。像private 这样的其他人可能会，但我不确定。如果文件需要身份验证才能访问或由代码生成，这些标头有时会自动设置。