Question

我正在为客户开发HTML应用。整个应用程序前端完成1个HTML文件，1个Javascript文件，1个CSS文件（加上jquery）和一些图像。服务器上有几个php脚本，使用AJAX调用，但只有在有Internet连接的情况下才能使用。如果没有可用的连接，则该站点将使用本地缓存的数据（使用localStorage）。

要使网站脱机，我在HTML中声明缓存清单。我的HTML看起来像这样：

<!DOCTYPE html>
<html manifest="cache.manifest.php" language="en">
...
</html>

cache.manifest.php的输出如下所示：

CACHE MANIFEST
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f

CACHE:
/css/ebot.css
/favicon.ico
/images/appicon.png
/images/list-arrow.png
/images/list-checkmark.png
/images/woman.png
/index.html
/js/jquery-1.8.3.min.js
/js/ebot.ls.js

NETWORK:
/emaillog.php
/getdata.php
/uploadlog.php

到目前为止一切顺利。现在，我从具有互联网连接的浏览器访问该站点。我收到一些通知，询问是否允许网站存储信息以供离线使用 - 我允许它。当我签入设置时，我发现该网站存储了316K数据 - 大约是对的。

现在我关闭互联网连接并尝试访问http://www.mysite.com/index.html - 并收到一条错误消息，提示“互联网连接不可用”（或某种程度上的内容）并且不显示该页面。我在我的开发机器（firefox，safari和chrome）以及客户端的ipad上测试的3个浏览器中发生了这种情况（该应用程序最终会在ipad上使用）。

我在这里缺少什么？我做错了什么？

Answer 1

这可能有很多原因。看看这篇文章：

我猜您没有为清单指定正确的内容类型（MIME）。它应该是'text / cache-manifest'。在Chrome中检查控制台中的事件。当appcache清单正确时，您应该会看到类似的内容：

使用清单http://example.com/manifest.appcache创建应用程序缓存应用程序缓存检查事件
应用程序缓存下载事件
应用程序缓存进度事件（XXX的YYY）
应用程序缓存缓存事件

我建议从最简单的清单开始，以确保解析清单。试试：

CACHE MANIFEST
NETWORK:
*

这样的清单应该只缓存你的启动html页面。

使HTML5应用程序脱机可用

1 个答案: