21

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?

doremi
  • 13,045
  • 22
  • 84
  • 131
  • Here's a thought: I 'believe' that the primary difference between regular disk cache and the new html5 offline cache is that when working offline (or without internet connection), traditional disk cache would not be used or available to render the page, whereas the offline cache will. – doremi Oct 18 '10 at 17:22

2 Answers2

22

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:

See also my recent answers to those related questions:

Community
  • 1
  • 1
rsp
  • 91,898
  • 19
  • 176
  • 156
  • This is not the answer we deserve, but the answer we need. +1 – doremi May 21 '13 at 17:16
  • It sounds like HTML 5 app cache is a niche thing. None of the web applications I've made are going to be of much use in an offline mode as each request generally results in a query of a database that changes frequently. Caching static files such as JavaScript, images, and CSS is already handled by HTTP response headers just fine. Even if there was a tiny benefit, it certainly wouldn't be worth the large effort for a scenario that is exceedingly rare. – Ryan Feb 27 '15 at 21:24
0

I 'believe' that the primary difference between regular disk cache and the new html5 offline cache is that when working offline (or without internet connection), traditional disk cache would not be used or available to render the page, whereas the offline cache will.

doremi
  • 13,045
  • 22
  • 84
  • 131