Web applications HTML5脱机问题：脱机时显示不同的页面_Web Applications_Html_Offline

Web applications HTML5脱机问题：脱机时显示不同的页面

web-applications html

Web applications HTML5脱机问题：脱机时显示不同的页面,web-applications,html,offline,Web Applications,Html,Offline,使用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 FA

使用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

请注意，我不希望缓存/and/Home/Details/2。相反，我希望在联机时使用联机版本，并在脱机时显示/？offline=true和/Home/Details/2？offline=true

该网站正在脱机工作，但出现了两个问题：

1） “网络”项目不受尊重。当我访问/页面时，它被下载到缓存中，可能是由于对主页html标记（）中的清单的引用

更糟的是：

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

可以看出，离线回退页面下载得很好，但重定向不起作用。此外，还有一个神秘的第六项正在下载

有什么想法吗？有更好的方法解决这个问题吗？

我不知道如何通过操纵缓存清单来实现这一点，但您可以通过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

。这可能会造成不必要的悲伤。

对于想使用脱机缓存尝试此操作的人：不要。我认为这是不可能的。另一个答案中提出的解决方案对我不起作用。最后，我在以下博客文章中实现了该方法：

对我来说，这就像一种魅力

如果你不相信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/content.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离线缓存似乎不适合区分在线用户和离线用户。

这种解决方案在iOs（iPhone/iPad）上对我有效，但在chrome或firefox上却不行。