3

我正在使用应用程序缓存使我的网站也可以离线工作。
我的清单看起来像这样，并使用以下内容嵌入<iframe>：

CACHE:
favicon.ico
assets/css/style.css
assets/js/libs/zepto.js
assets/js/app.js

NETWORK:
*

FALLBACK:
/ offline.html

当我切断互联网连接时，它按预期工作-> 一切都通过offline.html 页面提供。
但刚才我发现每个 404（例如服务器上从未存在的 URL）也使用清单中的 FALLBACK 部分显示offline.html。

有没有办法区分离线（在这种情况下，offline.html 是正确的选择）和服务器返回 404（在这种情况下我只想显示 404 错误）？

4

2 回答 2

6

如果原始请求，Appcache 将 FALLBACK...

...导致重定向到具有另一个来源的资源（指示强制门户），或 4xx 或 5xx 状态代码或等效代码，或者如果存在网络错误

（来自http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#changesToNetworkingModel）

不幸的是，当回退发生时，没有理由找出原因。您无法区分 500、404、重定向或连接失败。

这是一个hacky解决方法：

FALLBACK:
/connection-test.js connection-failed.js
/ offline.html

您可以将 connection-test.js 嵌入到您的 offline.html 页面中。connection-test.js loading 表示用户有连接，connection-failed.js 表示没有连接。

于 2012-12-13T13:03:26.060 回答
3

我在寻找相同问题的解决方案时遇到了您的帖子。

我最终做的是在我的后备页面中检查 navigator.onLine 的值（在你的情况下，它将是 offline.html）。如果 navigator.onLine 为真，则用户应该在线/连接到互联网（注意事项适用），并且由于未找到他们请求的文件而被发送到后备页面。所以，然后我将页面的内容更改为 404 的内容。

例子：

<script>

header=document.getElementById('header');
error_message=document.getElementById('error_message');

if(navigator.onLine){
    header.innerHTML='Page not found';
    error_message.innerHTML='The page you requested could not be found.  Please check the URL and try again.';
}

</script>

如果应用程序缓存规范包含处理 40x 和 50x 的其他方式，那肯定会很棒。虽然这个解决方案肯定不理想，但它是我能想到的最好的一个。

我希望它有所帮助。

于 2014-10-03T01:30:57.507 回答