Offline appcache not working
caching, html, offline, web-applications
Solution
Unbelievable! After all the debugging and hair-pulling-out, I had the manifest attribute on the HEAD element instead of the HTML element! Of all the dumb mistakes!
Link in question now works as expected.
Update: Just to make things obvious, here is what the top of the HTML file should look like:
<!doctype html>
<html manifest="offline.appcache">
<head>
Problem
Why is my offline app not cached by any browser? I've created a simplified test here: http://design.aqueo.us/test/appcache/ It is only two files: a single html file plus the manifest. (The html file includes some javascript to display the cache status.) Check the console log and you'll see it always says "Cache status: Uncached". Also chrome://appcache-internals/ (in Google Chrome) does not list the site. As far as I can tell, the browser never even fetches the manifest file. I've tried this in multiple browsers. Here's the manifest: ``` CACHE MANIFEST # . ``` And here's the HTML: ``` <!doctype html> <html> <head manifest="offline.appcache"> <meta charset="utf-8"> <title>Appcache test</title> <script> (function() { var webappCache = window.applicationCache; function loaded() { var h1El = document.querySelector("h1"); var connectionStatus = ((navigator.onLine) ? 'online' : 'offline'); h1El.textContent = h1El.textContent + " - currently: " + connectionStatus; switch(webappCache.status) { case 0: console.log("Cache status: Uncached"); break; case 1: console.log("Cache status: Idle"); break; case 2: console.log("Cache status: Checking"); break; case 3: console.log("Cache status: Downloading"); break; case 4: console.log("Cache status: Updateready"); break; case 5: console.log("Cache status: Obsolete"); break; } } function updateCache() { webappCache.swapCache(); console.log("Cache has been updated due to a change found in the manifest"); } function errorCache() { console.log("You're either offline or something has gone horribly wrong."); } window.addEventListener("load", loaded, false); webappCache.addEventListener("updateready", updateCache, false); webappCache.addEventListener("error", errorCache, false); })(); </script> </head> <body> <h1>Appcache Test</h1> </body> </html> ```