How to clear Application cache (HTML5 feature) using JavaScript?

Question

Our Web-Application uses Application cache (cache manifest) to restore HTML page and resources in off-line mode. HTML-pages have sessionIDs as params in URI. So, after each logout and login action new HTML-pages are saved to application cache because sessionId was changed in URI. After some weeks working with application some browsers start work slower. And size of Application cache (tested on FF 3.6+) is about 200Mb! After each logout we clear LocalStorage of browser,but how to clear resources from Application storage?

Answer 1

The problem with the application cache taking up so much space is that you are giving the user agent a different offline web application each time. An offline web application is identified to the user agent by the URI of the cache manifest file, including query string - not the URI of the master file as you might think.

Thus, by including the session ID in the cache manifest URI, you're telling the browser that each session gets its own brand new application without using any of the previously downloaded ones (and thus, never being able to clear them out). You're installing a different web application every time.

Reconsider how you're architecting your application, as currently using HTML5 offline cache manifest is providing no value - just causing excessive downloading. The architecture that web applications encourage is serving all HTML statically, and fetching data that requires sessions via AJAX. Web applications don't work when built in the classic "dynamically generate an HTML page with data on the server" paradigm.