Question

使用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）'FALLBACK'项目未被尊重。使用Web服务器离线浏览时，/只显示原始版本（没有？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个项目正在下载。

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

Answer 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);

此外，您的网络和FALLBACK部分中同时包含/和/Home/Details/2。这可能会造成不必要的悲伤。

Answer 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离线缓存不适合区分在线或离线的用户。

HTML5脱机问题：脱机时显示其他页面

2 个答案: