Is HTML5 appcache better than using expires headers or localstorage?

Question

consider the following scenario:

• site/app is only used online - requires active internet connection;
• all files have proper expire header settings;
• forcing file refresh can be handled via something like myFile.css?v=2 and location.reload(true);

Will my site/app actually load faster if I use HTML5's appcache (manifest)? why? I've looked around but there seems to be no consistent answer to this question.

HTML5Rocks advises using appcache but I think it is mostly due to cache reloading management.

Follow-up question: what about caching files in localstorage? where does it stand comparing to the other two?

Answer 1

How big are the files you're caching, and what browsers and devices are you targeting? For a regular desktop browser it probably won't make much difference. On mobile browsers it has been used/recommended as a workaround for the 25kb limit on resources cached by the iPhone, see also these two follow up articles: Mobile Browser Cache Limits: Android, iOS, and webOS and Mobile Browser Cache Limits, Revisited. Items in the appcache will survive power cycles and other automatic purging situations that the browser cache might not.

So the answer is: it depends. Whether it'd be worth doing on your site is something only you can work out by doing some testing.

As to your follow up question.: I would expect storage to offer the same advantages as appcache in this regard, the difference would be more in the amount of code you'd have to write to manage stuff yourself on the client side than in absolute performance.