如何使用HTML5应用程序缓存创建自定义脱机页面，同时保留我的404错误页？
编辑：到2022年，这个问题已经过时了。Appcache已经不再被推荐并从浏览器中删除，并且这个功能可以很容易地通过服务工作者来实现。
我试图使用HTML5应用程序缓存特性为我的网站提供一个自定义的“断开连接”页面。我有一个名为offline.html的页面，我想显示给那些试图在浏览器脱机时访问站点根页面(/)的用户，并且我想关闭所有其他的appcache功能。我不希望我的站点上的任何页面都缓存在appcache中(当然，除了offline.html和offline_cache.html (根据需要))。
我正在使用这个解决办法来防止我的主页被缓存为母版页，使用下面的代码，我感觉它几乎可以工作了。
我的index.html用脱机缓存助手加载iframe：
<iframe style="display: none;" src="offline_cache.html"></iframe>offline_cache.html文件加载site.appcache
<!DOCTYPE HTML>
<html lang="en" class="no-js" manifest="site.appcache">
<head>
<meta charset="utf-8">
<title>Manifest Initiation Page</title>
</head>
<body></body>
</html>我的site.appcache文件使用一个FALLBACK指令为根页提供一个离线选项(现在它匹配所有内容，但我希望它只匹配根页面)：
CACHE MANIFEST
CACHE:
NETWORK:
*
FALLBACK:
/ /offline.html
SETTINGS:
prefer-online期望行为：
除了自定义离线页(offline.html)及其助手之外，缓存中不应该有任何内容。当用户在线访问该站点时，该站点应该正常工作，包括所有特殊状态代码页(如404)。当用户在离线时访问站点的根页面时，他们应该看到offline.html。当用户脱机访问不存在的页面(可以是offline.html或本机脱机页面)时，发生什么并不重要，但是如果他们在线，则必须显示404页，而不是offline.html。
当前行为：
无论浏览器是在线的还是离线的，用户都不会看到任何404页-对于当用户在线时应该显示404错误的页面，他们会看到offline.html。这是因为回退部分中的/不仅匹配主页，还匹配以/开头的每个url，即整个站点包括所有不存在的页面(我希望它只匹配主页)。
本质上，我所需要做的就是让我的后备触发器只在/的主页上，而不是在站点上的任何其他路径上。然后，所有不存在的资源都将正确地返回本机脱机页或404错误页，而不是offline.html。我怎样才能做到这一点？
回答 1
Stack Overflow用户
发布于 2022-01-08 20:53:52
没有办法做到这一点。HTML需要在显示页面之前加载一个internet连接，如果您没有连接到internet，浏览器就不能只显示一个页面。即使是离线警报。如果您的意思是“对不起，离线更新”页面只需每次切换index.html / offline.html，否则就没有有效的选择了。
https://stackoverflow.com/questions/32366028
复制相似问题
腾讯云开发者
