CODEWITHSUNDEEP
htmlcachingweb-applicationsoffline
Doug
Doug

Reputation: 2610

Offline appcache not working

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>

Upvotes: 2

Views: 4136

Answers (1)

Doug
Doug

Reputation: 2610

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>

Upvotes: 9

Related Questions