Selective clearing of items in HTML5 application cache

Question

The HTML5 application cache API requires the browser to re-load all files declared in the CACHE section of the manifest file (when the manifest file has changed and update is called on the applicationCache API).

My manifest file contains thousands of entries. Are there any tricks to telling the browser to only re-load files that have changed?

Answer 1

I faced similar problems caused by the lack of control over the caching behavior of files listed in the cache manifest. Turns out you can gain some control over this process by using iFrames.

The strategy is to divide your thousands of files listed in your main cache manifest into separate (and more manageable cache manifests) then create a lot of dummy HTML pages, each of them referencing a cache manifest. Then, for each dummy HTML, you add an iFrame linking to it into your main HTML document. You can put the iFrames inside an invisible div, which will make the trick invisible to the user.

When each iFrame loads, its checks its individual cache manifest. If any files within that cache manifest changed, then the iFrame will only cache its subgroup of files. You can intelligently group related files together, depending on how much you expect them to change.

What's even better is that you can dynamically insert iFrames on your main HTML at any point of the user's interaction, and only when the iFrame is loaded, the caching progress will be triggered.