Can you store JavaScript and CSS files in localStorage to improve the performance of an online web app?

Question

I\'m working on a web application, which acts pretty much like a native application for both iOS and Android. However the Javascript files (jQuery + my own) and the css file tog

Answer 1

It should be possible to get a browser to cache assets like javascript includes (although ultimitely these directives can be over-ridden by the user, probably not something to worry about). See here for a crash-course on caching. In particular see the HTTP header:

Cache-Control: public

which should force the browser to cache the asset. Not sure if this works across sessions, e.g if the browser is closed and re-opened, but at least only one request will be made when the user first hits your site, and won't be re-requested on subsequent page views.

Also make sure your javascript includes are minimised, and see here for general tips on speeding things up.

Answer 2

iOS will not cache resources beyond 25k. localStorage should work.

Answer 3

You should investigate this option then: https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Answer 4

I've also been attempting to get this done without any luck. It seems the only way to do this is the follows:

• Use AppCache only for images
• Have all of your CSS and JS inline on the first page
• Once everything is loaded, have a JS script running to pull each of the scripts into localStorage
• You can version them through cookies to make sure the user has the most up-to-date copies

Have a look at http://sunpig.com/martin/archives/2011/05/21/considerations-for-caching-resources-in-localstorage.html for ideas on implementation!

I'm only halfway through but it's already working much better than depending on the appCache.

Edit: Keep in mind this is only useful for multi-page apps. If you're building a single page JS app, I don't think it's worth the effort to store back in localStorage. You might as well just inline everything and keep it there for best performance.