如何使用 HTML5 appcache 创建自定义离线页面，同时保留我的 404 错误页面？答案

【问题标题】：How can I create a custom offline page using HTML5 appcache, but also keep my 404 error pages?如何使用 HTML5 appcache 创建自定义离线页面，同时保留我的 404 错误页面？
【发布时间】：2015-11-28 17:19:11
【问题描述】：

编辑：截至 2022 年，此问题已过时。 Appcache 已被弃用并从浏览器中删除，此功能可以通过 service worker 轻松实现。

我正在尝试使用HTML5 appcache feature 为我的网站提供一个自定义的“断开连接”页面。我有一个名为offline.html 的页面，我想在浏览器处于脱机状态时向尝试访问站点根页面 (/) 的用户显示该页面，并且我想关闭所有其他 appcache 功能。我不希望我网站上的任何页面缓存在 appcache 中（当然，offline.html 和必要的offline_cache.html 除外）。

我正在使用this workaround 来防止我的主页被缓存为母版页，并且使用下面的代码，我觉得我几乎可以正常工作了。

我的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。我怎样才能做到这一点？

【问题讨论】：

感谢服务人员 - 我认为这个问题现在已经过时了。

标签： html http caching html5-appcache

【解决方案1】：

没有办法做到这一点。在显示页面之前，HTML 需要通过 Internet 连接加载，如果您没有连接到 Internet，则浏览器不能只显示您的一个页面。即使是离线警报。如果您的意思是“抱歉，离线更新”页面，只需每次切换 index.html / offline.html，否则，没有有效的选择。

【讨论】：

我不清楚这个答案，因为如果用户没有连接到互联网，您的网站当然可以向用户显示 HTML 页面，现在您只需使用服务人员即可。无论如何，自从问题发布以来，所有主要浏览器都删除了对 appcache 的支持，所以我正在考虑删除这个问题。