caching - HTML 5 Cache Manifest Vs. Etags, Expires or cache-control header

Question

Can someone explain to me how HTML 5's cache manifest differs from using other file header techniques for telling the browser to cache the file?

Answer 1

I feel strange posting an answer to a question that you have asked, commented and answered yourself but I think that nearly two years of your absolute monopoly in this topic is enough. ;)

The main differences between the HTML5 cache manifest vs. the traditional HTTP headers:

• for the cache manifest you need support in the browser
• for the HTTP headers you also need support in the browser of course but it's more universal
• you have more control over the caching with cache manifest
• your website or Web app can work correctly offline with no connection at all
• you can have two version of every resource - for offline and online usage

The last point is very handy and lets you easily swap parts of your website that need connection with eg. placeholders containing optional comments that the user doesn't get full functionality without the connection or whatever you want.

For the support see the Compatibility table for support of offline web applications in desktop and mobile browsers. Not surprisingly IE has some problems like always, currently Opera Mini doesn't support it, so I would suggest that if you use cache manifests then to also use the traditional HTTP headers (both HTTP/1.1 Cache-Control and HTTP/1.0 Expires - see RFC 2616 sec. 14.9.3).

You have more control over the whole caching process in your JavaScript, eg. you can use the window.applicationCache.swapCache() method to force an update of the cached version of your website without the need for manually reloading the page. There are some nice code examples on HTML5 Rocks (links below) explaining how to update users to the newest version of your website or Web application.

Keep in mind that you need to serve your cache manifest with correct HTTP headers, specifically the Content-Type and headers related to caching so that your browser knows that it's a cache manifest and that it should always be checked for new versions. This is for example how Github serves cache manifests for GitHub Pages:

Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]

where [CURRENT TIME] is the current GMT time in the correct format (see RFC 2616 sec. 3.3).

Here are some resources that will get you started:

• A Beginner's Guide to Using the Application Cache on HTML5 Rocks
• Using the application cache on Mozilla Developer Network
• Cache manifest in HTML5 on Wikipedia
• Offline Web Applications W3C Working Group Note
• Offline Web applications at WHATWG

See also my recent answers to those related questions:

• Force browser to clear cache
• Determining a page is outdated on github pages