带有更多内容的 HTML5 缓存 list 出现奇怪的错误

Question

我正在缓慢但肯定会完全迷上 HTML5 网络存储和应用程序缓存。

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

缓存 list 有效并在 http://manifest-validator.com/ 上进行了测试: http://daviddarx.com/stuffs/work/custom/54/cache.manifest

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

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

当我添加一些 Assets (页面中的 HTML 代码、1-2 张图像等)时，它仍然有效。

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

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

这与缓存文件的权重有关系吗？有大小或文件限制吗？

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

你知道那可能来自哪里吗？

---

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

这里是情况的摘要:

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

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

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

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

5.当我断开我的台式电脑与任何互联网的连接时，它还在工作!如果我在没有任何连接的情况下使用 chrome 浏览网站，我可以显示页面并且一切都很好，就像我希望它在我的 Iphone 上一样。

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

一切在我的台式电脑上都非常完美，但在我的 Iphone 上却无法正常工作。

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

Answer 1

分析了你的/61/测试版本:

JS 函数 preloadDetailImages 从 CSS 类 content 中提取背景图像 URL，并将其作为 src 属性放入新图像中目的。然后将此图像添加到 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]

这就是文档中的结尾(注意 "):

<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 上出现缓存问题的主要原因，我宁愿将其添加为评论，但还没有权限。