Why offline web application doesn't work?

问题

It looks like offline app is supported on most browsers. I copied the example app from WHATWG and put it on an web server but it didn't work when I test with the steps below:

browse to clock.html with windows phone 8.1 (IE 11)
page looks fine, then exit the browser
disable wifi and cell data
browse to the clock.html again but get Cannot find server or DNS error

I was not browsing in private mode and did not clear any browser cache. I don't know if this is specific to windows phone yet, but will test with other devices later.

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

回答1:

The clock.appcache needs to served with the correct mime type of text/cache-manifest. Most servers don't do this by default. You will need to modify the web.config or .htaccess with the correct setting.

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

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

回答2:

I have built an offline app that uses this technique and works well in every browser, however I have experienced the same issue as you on IE11 on Windows Phone 8.1 too. I wrote about this problem here: http://forums.wpcentral.com/windows-phone-8-1-preview-developers/274574-91.htm#post2585711

It seems that if you load the page, go into flight mode, then hit refresh, you receive the DNS error mentioned (when you would expect the browser to load the page from the cache).

There's one workaround I've found - load the page, bookmark it (and pin to the homepage if you want), quit the browser, go into flight mode, and then re-open the browser and load up the page using your bookmark only. It should load the site OK. Just don't hit refresh - it seems to be the refresh function that kills it.

来源：https://stackoverflow.com/questions/23689919/why-offline-web-application-doesnt-work

标签

html5

html5-appcache

cache-manifest