HTML5 offline cache works differently in different browsers, but always fails
I am trying to get a grasp on how HTML5 offline cache works. I've read various tutorials and they all have tiny variations on what the manifest file must look like. I set up a page with a cache manifest like this:
CACHE MANIFEST
index.html
Icon.jpg
a .htaccess file with this
AddType text/cache-manifest .manifest
and the index.html page like this:
<!DOCTYPE HTML>
<html manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="Icon.jpg"/>
<script>
cache = window.applicationCache;
cache.onchecking = function()
{
statBar.innerHTML="Status: Checking";
}
cache.ondownloading= function()
{
statBar.innerHTML="Status: Downloading";
}
cache.oncached = function()
{
statBar.innerHTML="Status: Cached:";
}
cache.onerror = function()
{
statBar.innerHTML='Status: An Error ocurred.';
}
cache.onupdateready= function()
{
statBar.innerHTML='Updated';
}
cache.onprogress= function()
{
statBar.innerHTML = statBar.innerHTML + "Progress!";
}
</script>
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>
<div id="statBar">Status:</div>
<script>开发者_开发知识库;
statBar = document.getElementById("statBar");
</script>
</body>
</html>
On FireFox, it will show Checking, Downloading, progress, then Cached, but using firebug add-on, it says "0 items in application cache". Also, status appears as 2 (UNCACHED). If accesed again, it will stay on Checking and status appears as Idle.
On Safari for iOS, it will do Checking Downloading, Progress then "An error ocurred". Same happens if accesed again.
In both cases, browsing back to the URL while offline gives a "Connection not found" error message. Both browsers are the latest version available.
Changing the manifest cache to include CACHE:, NETWORK: and FALLBACK: sections didn't have an effect either. Using absolute URLS didn't do anything different either.
Monitoring with a packet sniffer program called Packetyzer, I see that the manifest file is being delivered to the browser (Firefox in this case), with the correct MIME type. Does anyone have an idea on what I might be doing wrong?
The files are currently hosted at http://www.factordice.com/html5
加载中,请稍侯......
精彩评论