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" />仍然沒有運氣。

我無法弄清楚是什麼問題。

對於完整的項目：https://github.com/palaniraja/kmusic/blob/master/src

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「開發人員工具」和Firefox的「脫機工作」功能有時傾向於在緩存和脫機應用程序中產生各種奇怪的結果，因此您最好只是切換您的網絡服務器或連接開啓和關閉，而不是在測試時。