HTML5缓存清单:外部资源的回退

Question

我正在尝试创建一个清单，如：

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" />

我得到了本地不可用映像工作的回退，但外部映像没有。。。是否可以指定外部资源的回退？找不到有关这方面的文档。。。

Answer 1

很遗憾，它超出了规范范围，我还没有找到任何确切的理由来解释原因。这是任何使用CDN的人的合法需求，或者是作为12因素风格应用程序开发的开发人员的合法需求（例如，在Heroku上托管），上传的图像不能修改本地状态，而是需要保存到附加的资源中。幸运的是，我们仍然可以在Javascript中完成我们需要的内容，但这取决于您试图回退的资源类型。

特别是对于图像，您可以依赖onError属性：

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

请注意，如果回退映像不可用，我们将删除onError以防止无限循环。您可以在以下网站上阅读更多关于此的策略：jQuery/JavaScript以替换损坏的图像

然而，对于.js或.css，这种技术并不可靠，因为它们的onError属性不受支持。然而，由于通常可以提前显式地缓存所有这些资源，因此回退到异地.js和.css的情况并不常见。