Question

我正在使用应用程序缓存使我的网站也脱机工作我的清单看起来像这样，并使用<iframe>：

嵌入

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

NETWORK:
*

FALLBACK:
/ offline.html

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

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

Answer 1

如果原始请求，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

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

Answer 2

我在搜索同一问题的解决方案时遇到了您的帖子。

我最终做的是在我的后备页面中检查navigator.onLine的值（在您的情况下，这将是offline.html）。如果navigator.onLine为true，那么用户应该在线/连接到互联网（警告应用），并被发送到后备页面，因为找不到他们请求的文件。所以，然后我将页面的内容更改为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的其他方式，那肯定会很棒。虽然这个解决方案当然不理想，但它是我能想到的最好的解决方案。

我希望它有所帮助。

应用程序缓存：不要在404上从appcache提供文件

2 个答案: