HTML5 缓存清单：外部资源的后备答案

【问题标题】：HTML5 Cache Manifest: Fallback for external resourcesHTML5 缓存清单：外部资源的后备
【发布时间】：2014-02-18 02:35:06
【问题描述】：

我正在尝试创建如下清单：

CACHE MANIFEST

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

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

然后在我的html中

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

我得到了本地不可用图像的后备工作，但外部资源没有......是否可以为外部资源指定后备？特别是找不到有关此的文档...

【问题讨论】：

我不知道这是否适用于您的设置：“后备资源必须来自与清单文件相同的来源（即相同的协议、主机名和端口）。”
你不可能指望这会起作用。您不能为其他人的网站指定后备网址。如果我可以为您的网站指定后备选项，您愿意吗？

标签： html5-appcache

【解决方案1】：

很遗憾，它超出了规范，而且我还没有找到任何可靠的理由说明原因。对于使用 CDN 的任何人，或开发为12 factor 样式应用程序（例如，用于托管在 Heroku 上）的开发人员来说，这是一个合法的需求，其中上传的图像不能修改本地状态，而是需要保存到附加资源中。幸运的是，我们仍然可以在 Javascript 中完成我们需要的工作，但这取决于您尝试回退的资源类型。

对于图片，您可以依赖onError 属性：

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

请注意，如果备用图像不可用，我们将清除 onError 以防止无限循环。你可以阅读更多关于这方面的策略：jQuery/JavaScript to replace broken images

但是，对于 .js 或 .css，这种技术并不可靠，因为它们的 onError 属性 isn't as supported。但是，使用异地 .js 和 .css 的情况不太常见，因为通常您可以提前显式缓存所有这些资源。

【讨论】：