Appcache - 回退未按预期工作

Question

通过提供 FALLBACK，我希望 wifi.svg 在从缓存加载时被替换为 nowifi.svg。它没有按预期工作。

这是我的缓存清单文件。

CACHE MANIFEST 
# Version 0.1.3


index.html

CACHE: 
images/nowifi.svg

NETWORK: 
images/wifi.svg

FALLBACK:
images/wifi.svg images/nowifi.svg

当我离线时，我只看到 缺少图像 而不是缓存 nowifi.svg

我想，因为我从来没有请求 nowifi.svg 可能是问题，只是添加了一个隐藏 <img src="images/nowifi.svg" /> 仍然没有运气。

我无法弄清楚是什么问题。

Answer 1

您应该从清单的 NETWORK 部分删除 wifi.svg，以便后备工作：

CACHE MANIFEST 
#Version 0.1.3

index.html

CACHE: 
images/nowifi.svg

FALLBACK:
images/wifi.svg images/nowifi.svg

乍一看这可能有点违反直觉，但明确的 NETWORK 条目优先于后备条目，这就是为什么你的后备从未应用并且图像丢失的原因。

浏览器也足够聪明，可以识别 FALLBACK 条目的左侧将与服务器重新检查，并将正确地用后备图像替换它（而不是仅仅使用缓存副本），当它离线时。

它通常也会自动缓存 FALLBACK 条目的右侧（即 nowifi.svg），因此您也可以从 CACHE 部分省略它（通过它不会有任何影响）。

另请注意，根据我的经验，Google Chrome "Developer Tools" 和 Firefox 的 "Work Offline" 功能有时会产生各种奇怪的结果缓存和离线应用程序，因此您最好在测试时打开和关闭网络服务器或连接。

Appcache - fallback not working as expected