HTML5 Cache Manifest: Fallback for external resources

Question

I'm trying to create a manifest like :

CACHE MANIFEST

CACHE:
offline.jpg
http://externalSite/cacheDemo/offline.jpg

FALLBACK:
/   offline.jpg
http://externalSite/    http://externalSite/cacheDemo/offline.jpg

and then in my html

<img src="unavailable.jpg" />
<img src="http://externalSite/cacheDemo/unavailable.jpg" />

I get the fallback for the local unavailable image to work, but no for the external... is it possible to specify fallbacks for external resources? Cant find documentation about this in particular...

I don't know if this applies to your setup: "Fallback resources must be from the same origin (i.e. identical protocol, hostname and port) as manifest file." — Frederic, Sep 20 '12 at 09:05
You can't possibly expect this to work. You can't specify a fallback url for **somebody else's website**. Would you like it if I could specify fallbacks for **your** website? — user229044, Sep 20 '12 at 18:19

score 0 · Answer 1 · edited May 23 '17 at 12:20

It's unfortunate that it's outside of the specification, and I haven't found any solid justification on why. This is a legitimate need for anyone using a CDN, or for developers developing as 12 factor style application (e.g. for hosting on Heroku), where uploaded images can not modify local state, and instead need to be saved to an attached resource. Luckily, we can still accomplish what we need in Javascript, but it varies depending on the type of resource you're trying to fallback for.

For images specifically, you can rely on the onError attribute:

<img src="http://externalSite/cacheDemo/unavailable.jpg" onError="this.onError = null; this.src='offline.jpg'" />

Note that we're wiping out the onError to prevent infinite loops if the fallback image isn't available. You can read more strategies about this at: jQuery/JavaScript to replace broken images

For .js or .css, however, this technique is not as reliable, because their onError attribute isn't as supported. However, situations for falling back on offsite .js and .css are less common, since normally you can explicitly cache all of those resources in advance.

HTML5 Cache Manifest: Fallback for external resources

1 Answers1