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

Question

对于HTML5网络存储和应用程序缓存,我很慢但肯定会疯狂.

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

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

由于它不起作用,我采用了一个非常简单的工作示例,然后尝试逐步添加我的部分代码和数据,添加少量,然后我再次测试它.

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

当我添加一些我的资产(页面中的HTML代码,1-2个图像等)时,它仍然有效.

如果我然后添加更多的资源(例如,css和所有关联的图像),问题就开始了...如果我进入平面模式然后打开页面,我会得到正常的消息(我得到的是正确的消息)工作),然后另一条消息,要求我重试或取消.如果我取消,该网站只是不显示和应用程序关闭,如果我按下重试按钮,我会一次又一次得到相同的消息....

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

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

另一句话:在测试之前,我总是在计算机的控制台中检查我的页面,以确保它不是一个明显的问题.实际上,每次尝试都会在桌面浏览器上获得成功,并加载所有资产.

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

---

编辑:我再次做了很多测试,仍然无法让它工作.

以下是情况的摘要:

1. 这是我正在测试的版本: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浏览器上试试吗？

Answer 1

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

JS 函数preloadDetailImages从 CSS 类中提取背景图像 URL content，并将其作为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]

这就是文档中的最终内容（注意 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 上缓存问题的主要原因，我宁愿将其添加为评论，但还没有权限。