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

使用HTML5离线缓存时，我想在离线时显示另一个页面，而不是在线时。不应该太难，但它不适合我，几个小时后，我仍然没有看到发生了什么问题。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 /详细信息/ 2被缓存。相反，我想在线时使用在线版本，并且我想在离线状态下显示/？offline = true和/ Home/Details/2？offline = true。

该网站脱机工作，但两件事情会出错：

1）“网络”项目未兑现。当我访问/页面时，它正在缓存中下载，可能是由于引用了主页html-tag（）中的Manifest。

更糟：

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

可以看出，离线后备页面下载就好了，但重定向不能正常工作。此外：有一个神秘的第六个项目正在下载。

任何想法的？任何更好的方法来解决这个问题

来源

2011-02-24 TinkerTank

对于想要使用脱机缓存进行尝试的人：不要。我认为这是不可能的。在其他答案构成的解决方案不适合我。最终，我从以下博客文章实施了该方法： 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 /内容。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离线缓存不适合区分用户在线还是离线。

来源

2011-02-26 13:23:28 TinkerTank

我不知道如何通过操作缓存清单来完成此操作，但是您可以通过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。这可能会导致不必要的悲伤。

来源

2011-02-25 23:38:43 ggutenberg

此解决方案适用于iOs（iPhone/iPad），但不适用于Chrome或Firefox。 – TinkerTank 2011-03-19 18:28:56

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

回答

相关问题