应用缓存 - 回退未按预期工作

Question

3

通过提供FALLBACK，我期望在从缓存中加载时用nowifi.svg替换wifi.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" />仍然没有运气。

我无法确定问题出在哪里。

- palaniraja

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zeppelin · Accepted Answer

你需要从清单文件的 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 的“开发者工具”和 Firefox 的“脱机工作”功能，在缓存和离线应用程序方面有时会产生各种奇怪的结果，因此在测试时最好只是打开或关闭您的 Web 服务器或连接。