How to stop using HTML5 Application Cache

Sergei Dorogin
Sergei Dorogin’s technical blog
2 min readApr 5, 2012

--

Recently I’ve encountered some issue with HTML5 Application Cache (Offline support).
As we know (if who doesn’t check this awesome guide — http://www.html5rocks.com/en/tutorials/appcache/beginner/) HTML5 document can have an AppCache manifest. It’s specified as reference in manifest attribute of html tag: It doesn’t matter for our case what does the manifest contain. But let’s consider it’s kind of a stub and specifies that all documents should be loaded from server:

CACHE MANIFEST
CACHE:
NETWORK:
*
FALLBACK:

An application can contain such a manifest in development stage when we’ve decided to implement offline support and haven’t started to implement it.

If we load our root page in browser twice we’ll see that for the second time the page is loaded from cache.
Then make an edit in the page (any). Reload page in the browser and you’ll see no changes. It has no relation with http caching as in my case I set up returning “no-cache” http header in server web.config (my server is ASP.NET MVC under IIS). We can see the made change only after accomplishment two things:

  • make any edit in manifest.appcache file
  • close and open the browser

It’s OK.

But let’s consider that later we have decided to remove offline support for some reason. It seems that it’s enough to remove manifest attribute from html tag, right? Nope.
Make any change in the root page, remove manifest attribute and reopen the browser. You won’t see the made change. Why? Because the browser continues to use its cache. It seems that stop using AppCache wasn’t thought over much. Or it’s just quirk of Google Chrome v18. The only way to stop using AppCache I’ve found so far is the following:

  • instead of removing manifest attribute from html tag just change manifest file name to not existing file (for an example:
  • reload the page in the browser

You’ll see an error in Chrome console:

Application Cache Error event: Manifest fetch failed (404) http://localhost/myapp/not-existing.appcache

After that you can safely remove manifest attribute from html.

If this’ happening on your local box then there’s much simpler way: you can just go to “chrome://appcache-internals/” page and clear any AppCache. But if it’s not (you’re so lucky to get to deployment stage) then it’s seems that removing manifest attribute isn’t a good idea at all. Or you can specify not existing manifest as I described above (but how to guarantee that all users have refreshed page with not existing manifest reference?).

Obviously the things are much more complex then they should.

--

--