HTML5 离线问题：离线时显示不同的页面答案

【问题标题】：HTML5 offline problem: Show a different page when offlineHTML5 离线问题：离线时显示不同的页面
【发布时间】：2011-02-24 15:36:43
【问题描述】：

使用 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/Details/2 被缓存。相反，我想在我在线时使用在线版本，并且我想在我离线时显示 /?offline=true 和 /Home/Details/2?offline=true。

该网站正在离线运行，但出现了两个问题：

1) 'NETWORK' 项目没有被兑现。当我访问/页面时，它正在缓存中下载，可能是由于引用了主页html-tag（）中的Manifest。

更糟：

2) 'FALLBACK' 项目没有被兑现。使用网络服务器离线浏览时，/ 只显示原始版本（不带 ?offline=true），找不到 /Home/Details/2。但是， ?offline=true 版本在缓存中：当我在网络服务器离线的情况下手动访问它们时，它们显示得很好。

补充信息：第一次打开页面时的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

可以看到离线后备页面下载正常，但是重定向不起作用。此外：还有一个神秘的第 6 项正在下载。

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

【问题讨论】：

标签： web-applications html offline

【解决方案1】：

我不知道如何通过操作缓存清单来做到这一点，但你可以通过 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);

您的 NETWORK 和 FALLBACK 部分同时拥有 / 和 /Home/Details/2。这可能会造成不必要的悲伤。

【讨论】：

这个解决方案在 iOs (iPhone / iPad) 上对我有效，但在 chrome 或 firefox 中无效。

【解决方案2】：

对于想要使用离线缓存尝试此操作的人：不要。我认为这是不可能的。另一个答案中提出的解决方案对我不起作用。最终，我实现了以下博客文章中的方法： 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/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 离线缓存似乎不适合区分用户在线或离线。

【讨论】：