Appcache - fallback not working as expected

Question

By providing FALLBACK, I expect the wifi.svg to be replaced with nowifi.svg when it is loaded from cache. it is not working as expected.

Here is my cache manifest file.

CACHE MANIFEST 
# Version 0.1.3


index.html

CACHE: 
images/nowifi.svg

NETWORK: 
images/wifi.svg

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

When I'm offline, I only see missing image in place of cached nowifi.svg

I thought, since I never request nowifi.svg could be the problem, just added a hidden <img src="images/nowifi.svg" /> still no luck.

I could not able to figure out what is the issue.

For complete project: https://github.com/palaniraja/kmusic/blob/master/src

Answer 1

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

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部分省略它（通过它赢了'影响任何事情。）

另请注意，根据我的经验，谷歌Chrome“开发人员工具”和Firefox的“离线工作”功能有时会在缓存和离线应用程序中产生各种奇怪的结果，所以最好切换你的测试时，Web服务器或连接打开和关闭。