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

发布于 2024-10-19 07:57:46 字数 1729 浏览 7 评论 0原文

使用 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) 未兑现“网络”项目。当我访问 / 页面时，它正在缓存中下载，可能是由于引用了主页 html-tag () 中的 Manifest。

更糟糕的是：

2）“后备”项目没有得到兑现。当使用网络服务器离线浏览时， / 只显示原始版本（没有 ?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

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

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

原文

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.

This is my Manifest:

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

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) 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 ().

worse:

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.

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

[浮城] 2024-10-26 07:57:46

我不确定如何通过操作缓存清单来执行此操作，但您可以通过 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 。这可能会造成不必要的悲伤。

I'm not sure how to do this by manipulating the cache manifest, but you can do it programmatically via 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);

Also you have both / and /Home/Details/2 in your NETWORK and FALLBACK sections. This might be causing unnecessary grief.

回复收藏 0 原文

忘羡 2024-10-26 07:57:46

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

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.

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

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>

Since the content.html is in the 'NETWORK' section. the fallback will never work.

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: It seems HTML5 offline cache is not suitable to differentiate between a user being online or offline.

回复收藏 0 原文

~没有更多了~