Variable HTML5 offline appcache for different devices

Question

I'm creating an HTML5 game. The game is cross platform and has different graphics sets for devices with different screen resolutions. Lower quality set is for mobiles and the other one for tablets and PCs.

Now I want to make my application work offline with appcache manifest. Naturally I want to cache only required graphics set and thus I need to select what manifest file should be used depending on the User-Agent string.

I was trying to trick it with conditional load of html files via iframe without luck - cache is only saved for main manifest.

Does anyone have any ideas how to select different manifest file depending on device?

UPD In the [Diveintohtml5 Offline Section1 there's an example of manifest:

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

As I understand it supposes to do lazy loading and add to cache only items that were requested for loading from the application while it online. This solution seems to solve my problem since I can only load desired graphics set. However in practice on Chorme and iOS Safari while offline cache has no resources at all, except offline.html.

Answer 1

If your app has serves-side parts, simply send different manifests for different agents. In case it doesn't have a server, just make different application packages for each agent. Anyway, there's no way to check agent and supply different resources by only using cache manifest file.