HTML5离线问题：离线时显示其他页面 [英] HTML5 offline problem: Show a different page when offline
问题描述
使用HTML5离线缓存，我想在离线时显示另一个页面，与我在线时相比。
不应该太难，但它对我不起作用，几个小时后，我仍然没有看到出了什么问题。
Using HTML5 offline cache, I want to display another page when I'm offline, compared to when I'm online. Shouldn't be too hard, but it doesn't work for me and after a few hours, I'm still not seeing what's going wrong.
这是我的清单：
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。
Note that I don't want / and /Home/Details/2 to be cached. Instead, I want to use the online versions when I'm online, and I want to display the /?offline=true and /Home/Details/2?offline=true when I'm offline.
该网站正在脱机工作，但有两件事情出错：
The website is working offline, but two things are going wrong:
1）网络项目未被尊重。当我访问/页面时，它正在缓存中下载，可能是由于在主页html-tag（）中引用了Manifest。
1) The 'NETWORK' items aren't being honoured. When I visit the / page, it is being downloaded in the cache, probably due to a reference to the Manifest in the homepage html-tag ().
更糟：
2）'FALLBACK'项目未被兑现。使用Web服务器离线浏览时，/只显示原始版本（没有？offline = true），找不到/ Home / Details / 2。
然而，？offline = true版本位于缓存中：当我在网络服务器离线时手动访问它们时，它们显示正常。
2) The 'FALLBACK' items aren't being honoured. When browsing with the webserver offline, the / just shows the original version (without ?offline=true) and the /Home/Details/2 can't be found. The ?offline=true versions are, however, in the cache: When I visit them manually with the webserver offline, they show up just fine.
其他信息：Chrome开发者控制台首次打开页面时：
Additional information: The Chrome developer console when opening the page for the first time:
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个项目正在下载。
It can be seen that the offline fallback pages are being downloaded just fine, but the redirect doesn't work. Moreover: there's a mysterious 6th item being downloaded.
任何想法都是？有没有更好的解决这个问题的方法？
Any idea's? Any better approaches to this problem?
推荐答案
对于想要使用离线缓存尝试此操作的人：不要。我认为这是不可能的。
在另一个答案中提出的解决方案对我不起作用。最后，我从以下博客文章中实现了该方法：
http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html 。
For whoever wants to try this using the offline cache: Don't. I think it's not possible. The solution posed in the other answer didn't work for me. Eventually, I've implemented the method from the following blog post: http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html .
对我来说，这就像一个魅力。
For me, this works like a charm.
如果你不相信HTML5离线缓存无法完成;
我一直试图遵循最小的例子：
If you're not convinced that it can't be done with the HTML5 offline cache; I've been trying to following minimal example:
/cache.manifest：
/cache.manifest:
CACHE MANIFEST
FALLBACK:
/html5/content.html /html5/offline.html
NETWORK:
/html5/content.html
/html5/index.html
/html5/index.html
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
<a href=/html5/content.html>content</a>
</body>
</html>
/html5/content.html
/html5/content.html
<!DOCTYPE HTML>
<html>
<body>
Online! :)
</body>
</html>
/html5/offline.html
/html5/offline.html
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
Offline..
</body>
</html>
由于content.html位于网络部分。后备将永远不会起作用。
Since the content.html is in the 'NETWORK' section. the fallback will never work.
另一种选择是完全删除网络部分。在这种情况下，后备工作，但每当用户在线访问content.html时，它将被缓存。 - 当用户离线时，仍然显示在线版本。
The other option is to remove the 'NETWORK' section entirely. In this case the fallback works, but whenever the user visits the content.html when online, it will be cached. - When the user goes offline, the online version is still being displayed.
iow：似乎HTML5离线缓存不适合区分在线或离线的用户。
iow: It seems HTML5 offline cache is not suitable to differentiate between a user being online or offline.
这篇关于HTML5离线问题：离线时显示其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
