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 together are pretty large for mobile use, which make the app slow to load if the user doesn't have 3G enabled.

I therefore started to think about storing these files offline. However aside from the cache.manifest (which in my knowledge only kicks in when there is no internet connection to enable offline use) I have found no way to this. What I ideally would like to have is to check if the files are already cached/stored and if not, use them and then store them for the next time.

Is this possible? This would reduce the time to load my app a lot as the index file itself is very small. I'm still working on slimming down the files by optimizing but this would help a lot in the meantime.

EDIT:

Just to provide a bit more detail, sorry if I was unclear before.

I've started building this webapp using the HTML5 boilerplate, and my .htaccess file has all JS and CSS file headers with an expiration date of 1 year.

But it seems that opening the app from the iOS Home Screen loads the .js and .css files each time, as was the case for when they are not cached. Opening the website on a desktop or even the iOS Safari web browser does seem to cache the files the right way, as changes in the Javascript and CSS are only displayed after manually refreshing the page.

It seems like opening and closing and opening the web-app from the home screen is acting as a refresh, therefore loading the files each time, even though they are stored through a cache.manifest for offline use, and the files' expiration dates are set far into the future.

EDIT 2:

Thought I'd include cache headers for the files. These seem to be alright.

Cache-Control max-age=31536000, public
Expires Fri, 18 May 2012 17:34:20 GMT
Vary Accept-Encoding,User-Agent
Content-Encoding gzip Keep-Alive timeout=2, max=98

Answer 1

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

Answer 2

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 3

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

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.