我对 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浏览器上试试吗?

解决方法

分析你的/ 61 /测试版:

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="&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上缓存问题的主要原因,我宁愿把它添加为评论,但还没有特权.

HTML5缓存显示更多内容的奇怪错误的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解使用双缓存解决Canvas clearRect引起的闪屏问题

    这篇文章主要介绍了详解使用双缓存解决Canvas clearRect引起的闪屏问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  8. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  9. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部