title: HTML5 offline cache works differently in different browsers, but always fails
body: <p>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:</p>
  
  <pre><code>CACHE MANIFEST
  index.html
  Icon.jpg
  </code></pre>
  
  <p>a .htaccess file with this</p>
  
  <pre><code>AddType text/cache-manifest .manifest
  </code></pre>
  
  <p>and the index.html page like this:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html manifest="cache.manifest"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  &lt;link rel="apple-touch-icon" href="Icon.jpg"/&gt;
  
  &lt;script&gt;
  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!";
  }
  
  &lt;/script&gt;
  &lt;title&gt;New Web Project&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;New Web Project Page&lt;/h1&gt;
  
  &lt;div id="statBar"&gt;Status:&lt;/div&gt;
  &lt;script&gt;
  statBar = document.getElementById("statBar");
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>On Safari for iOS, it will do Checking Downloading, Progress then "An error ocurred". Same happens if accesed again.  </p>
  
  <p>In both cases, browsing back to the URL while offline gives a "Connection not found" error message. Both browsers are the latest version available.</p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>The files are currently hosted at <a href="http://www.factordice.com/html5" rel="nofollow">http://www.factordice.com/html5</a></p>