HTML5缓存显示更多内容的奇怪bug

我对HTML5Web存储和应用程序缓存慢慢地但肯定会完全发疯

以下是我的例子：

缓存清单有效，并在以下位置进行了测试：

由于它不起作用，我做了一个非常简单的工作，然后尝试一步一步地添加我的代码和数据部分，只添加了很少的内容，然后我再次测试了它

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

当我添加一些我的资源（页面中的HTML代码、1-2个图像等）时，它仍在工作

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

我真的不知道该怎么办。每次我在测试之前都会验证缓存清单，每次我都会更改URL以确保所有内容都已重置

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

另一句话：在测试之前，我总是在电脑控制台上检查我的页面，以确保这不是一个明显的问题。事实上，每次尝试都会在桌面浏览器上获得成功，并加载所有资源

你知道那是从哪里来的吗

---

编辑： 我又做了很多测试，但仍然无法让它工作

以下是情况摘要：

以下是我正在测试的版本：

二,。 这是我的缓存清单： 根据法律，它是完全有效的

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

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

五,。 当我断开桌面电脑与任何互联网的连接时，它工作正常！如果我在没有任何连接的情况下使用chrome浏览网站，我可以显示页面，一切都很好，就像我在Iphone上所期望的那样

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

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

你知道吗？

---

您能在桌面和iphone浏览器上试用吗？

分析了您的/61/测试版本：

JS函数

preload detailimages

从CSS类

content

中提取背景图像URL，并将其作为

src

属性放入新的图像对象中。然后将该图像添加到DOM中，显然是为了让浏览器预加载它。但是，CSS定义中URL周围的双引号不会被删除，因此最终作为

src

属性值的一部分。这会产生一个显然未缓存的损坏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]

这就是文档的结尾（注意

“

s）：

由于双引号可以是有效的URL部分，浏览器将其解释为相对路径并尝试检索 从你的服务器。我可以在我的http嗅探器中看到它

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

---

---

这可能不是你在iPhone上出现缓存问题的主要原因，我更愿意将此作为评论添加，但还没有特权。你说，当你添加更多资产时，问题开始出现。你可能正在达到缓存限制

---

您可以查看此链接以了解更多有关HTML5配额的背景信息：

当您在Chrome或Safari中运行此链接时，您是否在JS控制台中看到任何错误？缓存清单的网络部分中是否有任何项目？当您收到重试/取消提示时，您是否可以发布缓存清单的外观？这通常表示有什么问题在应用程序中，需要对缓存清单的网络部分中未列出的站点进行网络访问。嗯，你是对的，我根本没有管理网络部分！可能问题就出在这一点上。清单如下：你对网络访问数据的看法是对的。我只是没有考虑到这一点。我将尝试分析所有被调用的内容在网站中，使用inspector的net选项卡！感谢您的输入！出现问题：“应用程序缓存错误事件：资源获取失败（404）”您应该在网络下列出此项：

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