这是我的例子：
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浏览器上试试吗？
解决方法
JS函数preloadDetailImages从CSS类内容中提取背景图像URL,并将其作为src属性放入新的Image对象中.然后将此图像添加到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;)：
<img src=""http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg"" style="display: none;">
由于双引号可以是有效的URL部分,因此浏览器会将其解释为相对路径并尝试检索
从您的服务器/stuffs/work/custom/61/%22http://daviddarx.com/stuffs/work/custom/61/mobile/images/custom_part_background.jpg%22.我可以在我的http嗅探器中看到它.
