How to cache pictures in html5 AppCache

Question

I'm building a photography site, which ideally should work offline. Caching the css/js files required is pretty straightforward. The issue is, what to do with the actual photographs.

I'm currently loading them from flickr, both a thumbnail version and a full res one. This brings me to two questions:

Is it possible to cache files that are delivered from an external source, or does everything have to come from the same domain?

It is probably too much to cache all pictures in the app-cache, because it will cause a big download the first time a user hits the site. What are the recommendations here? Is it possible to have the user explicitly turn on the full version of the app cache?

Answer 1

If you're not serving anything over https, you can include resources from as many origins as you want in the CACHE section. But cross-origin appcaching with https only works in Chrome today. I doubt Flickr serves images over https, so you should be fine.

Some browsers will prompt the user the first time an appcache would be downloaded, but not all (I know Firefox does, but Chrome doesn't). For more control you would have to implement some logic in your application. Maybe let users make a choice within your application, store it as a per-user setting and then only serve your page with a manifest to users who opted in.