Question

我正在尝试使用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页面而不是{{1 }}

当前行为：

无论浏览器是在线还是离线，用户都看不到任何404页面 - 对于在用户上线时应显示404错误的页面，他们会看到offline.html。这是因为后备部分中的offline.html不仅匹配主页面，而且还匹配以/开头的每个URL，即整个站点包括所有不存在的页面（我希望它仅匹配主页面）

从本质上讲，我需要做的就是只在/的主页上触发我的后备触发器，而不是网站上的任何其他路径。然后，所有不存在的资源都将正确返回本机脱机页面或404错误页面而不是/。我怎么能做到这一点？

如何使用HTML5 appcache创建自定义脱机页面，还要保留我的404错误页面？

0 个答案: