Using and clearing the Browser Appcache

I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.

<html manifest="cache.appcache">
    Your site goes here.
</html>

Example contents of a cache manifest:

CACHE MANIFEST

# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg

# All other files require the user to be online
NETWORK:
*

In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to

chrome://appcache-internals/

and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.

In Safari it’s not that easy, but you can find an explanation on stackoverflow.

To have a look at your caches in Firefox you can go to

about:cache?device=offline

But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find „Offline Web Content and User Data“.

Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.