HTML5 Cache 显示带有更多内容的奇怪错误答案

【问题标题】：HTML5 Cache manifest weird bug with more contentHTML5 Cache 显示带有更多内容的奇怪错误
【发布时间】：2012-08-15 23:27:07
【问题描述】：

我对 HTML5 网络存储和应用程序缓存正在慢慢地但肯定会完全发疯。

这是我的例子： http://daviddarx.com/stuffs/work/custom/54/

缓存清单有效并在 http://manifest-validator.com/ 上测试：http://daviddarx.com/stuffs/work/custom/54/cache.manifest

由于它不起作用，我采取了一个非常简单的工作example，然后尝试逐步添加我的部分代码和数据，添加很少，然后我再次测试它。

当我从一个简单的例子开始时，一切都很好。如果我将 iPhone 置于平面模式，则在启动网站时会收到一条离线消息，但随后我可以查看结果。

当我添加一些资产（页面中的 HTML 代码、1-2 张图片等）时，它仍然可以正常工作。

如果我随后添加更多资产（例如，css 和所有关联的图像），问题就开始了……如果我进入平面模式然后打开页面，我会收到正常消息（我当它工作时得到），然后是另一条消息，要求我重试或取消。如果我取消，网站就不会显示并且应用程序关闭，如果我按下重试按钮，我会一次又一次地收到相同的消息....

我真的不知道该怎么办。每次我在测试之前验证我的缓存清单，每次我更改 URL 以确保一切都被重置。

这是否与缓存文件的重量有关？有大小或文件限制吗？

另一句话：我总是在测试之前在我的计算机上的控制台中检查我的页面，以确保这不是一个明显的问题。事实上，每次尝试都在桌面浏览器上成功，加载了所有资产。

你知道那是从哪里来的吗？

编辑：我又做了很多测试，但仍然无法正常工作。

这里是情况的摘要：

这是我正在测试的版本：http://daviddarx.com/stuffs/work/custom/61/

2。这是我的缓存清单：http://daviddarx.com/stuffs/work/custom/61/manifest.appcache 根据http://manifest-validator.com/完全有效。

3。当我在 chrome（桌面）上加载页面并在控制台上显示时，一切正常。所有元素都被缓存了，如果我刷新，缓存就可以了。

4。当我在桌面 chrome 上加载页面并查看网络面板时，我可以看到所有内容都是从缓存中加载的。没有任何丢失的文件。

5。当我将台式计算机与任何互联网断开连接时，它就可以工作了！如果我在没有任何连接的情况下使用 chrome 浏览网站，我可以显示页面并且一切都很好，因为我希望它会出现在我的 Iphone 上。

6。当我第一次使用我的 iPhone 并访问该网站时，一切正常。移动 Safari 的控制台没有任何错误。如果我打开“平面模式”并返回 safari，我可以显示我所在的页面（我以前无法实现）。但是，如果我尝试更改页面，它只会警告我“无法打开页面”，然后取消请求。我只能停留在当前页面。

在我的台式电脑上一切都很完美，但在我的 Iphone 上却不行。

你有什么想法吗？你能在你的桌面和iphone浏览器上试试吗？

【问题讨论】：

当您在 Chrome 或 Safari 中运行此程序时，您是否在 JS 控制台中看到任何错误？缓存清单的 NETWORK 部分中是否有任何项目？当系统提示您重试/取消时，您可以发布缓存清单吗？这通常表示应用程序中的某些内容需要对缓存清单的 NETWORK 部分中未列出的站点进行网络访问。
哼，你是对的，我只是根本没有管理网络部分！或许问题就是由此而来。这是清单：daviddarx.com/stuffs/work/custom/54/cache.manifest 您对网络访问图是正确的。我只是没想到。我将尝试使用检查员的 net 选项卡分析网站中所有调用的内容！感谢您的意见！
有一个问题：“应用程序缓存错误事件：资源获取失败 (404) daviddarx.com/stuffs/work/custom/61/mobile/php/mail.php”你应该在网络下列出这个：html5rocks.com/en/tutorials/appcache/beginner

标签： html application-cache web-storage

【解决方案1】：

分析你的 /61/ 测试版本：

JS 函数 preloadDetailImages 从 CSS 类 content 中提取背景图像 URL，并将其作为 src 属性放入新的 Image 对象中。然后将此图像添加到 DOM 中，显然是为了让浏览器预加载它。但是，CSS 定义中 URL 周围的 双引号 不会被删除，因此最终会成为 src 属性值的一部分。这会产生一个损坏的 URL，该 URL 显然没有被缓存，因此无法脱机工作。

这是 CSS 定义：

#websiteContainer #customContainer .content {
    background-image: url("../images/custom_part_background.jpg");
}

使用这段 JS 代码，您可以提取 url() 中的所有内容，包括双引号：

$($(".content")[actualImageLoadingID]).css("background-image")
.split("url(")[1].split(")")[0]

这就是文档中的内容（注意&quot;s）：

<img src="&quot;http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg&quot;" style="display: none;">

由于双引号可以是有效的 URL 部分，浏览器将其解释为相对路径并尝试检索 /stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg%22 来自您的服务器。我可以在我的 http 嗅探器中看到它。

解决方案：删除 CSS 定义中的引号或在 JS 函数中过滤掉它们。

这可能不是您在 iPhone 上出现缓存问题的主要原因，我宁愿将其添加为评论，但还没有权限。

【讨论】：

【解决方案2】：

您说当您添加更多资产时问题开始出现。您可能已达到缓存限制。

您可以查看此链接以了解有关 HTML5 配额的更多背景信息：http://updates.html5rocks.com/2011/11/Quota-Management-API-Fast-Facts

【讨论】：