Question

大多数浏览器都支持offline app。我从WHATWG复制了示例应用并将其放在网络服务器上，但是当我按照以下步骤进行测试时，它无法正常工作：

使用Windows Phone 8.1（IE 11）浏览到clock.html
页面看起来不错，然后退出浏览器
禁用wifi和手机数据
再次浏览到clock.html但获取Cannot find server or DNS error

我没有在私人模式下浏览，也没有清除任何浏览器缓存。我还不知道这是否特定于Windows手机，但稍后会测试其他设备。

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>

clock.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';
}

Answer 1

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

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

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

Answer 2

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

IIS https://stackoverflow.com/a/7118481/195050

Apache https://stackoverflow.com/a/3281574/195050

为什么离线网络应用程序不起作用？

2 个答案: