HTML5離線問題：離線時顯示不同的頁面

使用HTML5離線緩存時，我想在離線時顯示另一個頁面，而不是在線時。不應該太難，但它不適合我，幾個小時後，我仍然沒有看到發生了什麼問題。HTML5離線問題：離線時顯示不同的頁面

這是我的清單：

CACHE MANIFEST 

# v15 Minute: 18 


CACHE: 
/Scripts/jquery-1.4.4.min.js 
/Content/Site.css 
# Documents 
/content/lulo_flower.jpg 

NETWORK: 
/
#Detail screens 
/Home/Details/2 

FALLBACK: 
//?offline=true 
/Home/Details/2 /Home/Details/2?offline=true

請注意，我不希望/和/ home /詳細信息/ 2被緩存。相反，我想在線時使用在線版本，並且我想在離線狀態下顯示/？offline = true和/ Home/Details/2？offline = true。

該網站脫機工作，但兩件事情會出錯：

1）「網絡」項目未兌現。當我訪問/頁面時，它正在緩存中下載，可能是由於引用了主頁html-tag（）中的Manifest。

更糟：

2） '回退' 項目未兌現。當離線瀏覽web服務器時，/只顯示原始版本（不包括offline = true），並且找不到/ Home/Details/2。但是，offline = true版本在緩存中：當我使用Web服務器離線手動訪問它們時，它們顯示得很好。

附加信息：首次打開頁面時，Chrome開發者控制檯：

Application Cache Progress event (0 of 5) http://localhost:51034/Scripts/jquery-1.4.4.min.js 
:51034/:65online: yes, event: progress, status: downloading 
Application Cache Progress event (1 of 5) http://localhost:51034/content/lulo_flower.jpg 
:51034/:65online: yes, event: progress, status: downloading 
Application Cache Progress event (2 of 5) http://localhost:51034/Content/Site.css 
:51034/:65online: yes, event: progress, status: downloading 
Application Cache Progress event (3 of 5) http://localhost:51034/?offline=true 
:51034/:65online: yes, event: progress, status: downloading 
Application Cache Progress event (4 of 5) http://localhost:51034/Home/Details/2?offline=true 
:51034/:65online: yes, event: progress, status: downloading 
Application Cache Progress event (5 of 5) 
:51034/:65online: yes, event: progress, status: downloading

可以看出，離線後備頁面下載就好了，但重定向不能正常工作。此外：有一個神祕的第六個項目正在下載。

任何想法的？任何更好的方法來解決這個問題

來源

2011-02-24 TinkerTank

對於想要使用脫機緩存進行嘗試的人：不要。我認爲這是不可能的。在其他答案構成的解決方案不適合我。最終，我從以下博客文章實施了該方法： http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html。

對我來說，這就像一個魅力。

如果您不確定HTML5脫機緩存無法完成，我一直在嘗試以下小例子：

/cache.manifest：

CACHE MANIFEST 

FALLBACK: 
/html5/content.html /html5/offline.html 

NETWORK: 
/html5/content.html

/html5/index.html

<!DOCTYPE HTML> 
<html manifest="/cache.manifest"> 
<body> 
    <a href=/html5/content.html>content</a> 
</body> 
</html>

/HTML5 /內容。HTML

<!DOCTYPE HTML> 
<html> 
<body> 
    Online! :) 
</body> 
</html>

/html5/offline.html

<!DOCTYPE HTML> 
<html manifest="/cache.manifest"> 
<body> 
    Offline.. 
</body> 
</html>

由於content.html是在 '網絡' 部分。後備將無法工作。

另一種選擇是完全刪除「網絡」部分。在這種情況下，回退工作，但是當用戶在線訪問content.html時，它將被緩存。 - 當用戶離線時，在線版本仍在顯示。

iow：看起來HTML5離線緩存不適合區分用戶在線還是離線。

來源

2011-02-26 13:23:28 TinkerTank

我不知道如何通過操作緩存清單來完成此操作，但是您可以通過JavaScript以編程方式執行此操作。

function errorCache(event) { 
    // Either a download error occurred or the user is offline 
    var offlineURL = 'http://myurl.com/?offline=true' 
    window.location = offlineURL; 
} 

window.applicationCache.addEventListener("error", errorCache, false);

你也需要在你的網絡和退回部分都/和/Home/Details/2。這可能會導致不必要的悲傷。

來源

2011-02-25 23:38:43 ggutenberg

此解決方案適用於iOs（iPhone/iPad），但不適用於Chrome或Firefox。 – TinkerTank 2011-03-19 18:28:56

HTML5離線問題：離線時顯示不同的頁面

回答

相關問題