2

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

Omar
  • 21
  • 2
  • 1
    For some reason, it works for me. I see Status: Cached when online the first time, Status: An Error Occurred while offline, and Status: Updated when online again. Looking at Firebug, I see "0 items in application cache" but the status is 1, and when I check about:cache I can see the items are indeed cached. Anyway, I think all is working and you aren't doing anything wrong. – Gaurav Jul 21 '11 at 03:16
  • 1
    Thanks for the "about:cache" feature. I didn't know about it. And yes, indeed I do see the items there. The question is, why can't I browse the page while offline? If an Internet connection is still required, it kinda beats the point. – Omar Jul 23 '11 at 10:39
  • Sorry if I didn't make that clear: your page does load while offline. It shows "Status: An Error Occurred" but it loaded. :) – Gaurav Jul 23 '11 at 10:54
  • Now, is there a reason why this wouldn't work on Safari on iOS? That's the platform I am targeting. – Omar Jul 26 '11 at 03:39

0 Answers0