HTML5-离线缓存-升级项目笔记一

原创 2015年07月10日 15:17:54

项目需求: 产品  HTML5一个类似聊天室的产品 外核用的node-webkit  把页面打进了外核里面. 一款迭代产品,使用升级包进行升级完成业务上功能扩展.

                选用的技术:  HTML5 离线缓存   application cache  localstorage 混合完成此功能.

               一、application cache 使用方法

                     1.  在 webserver 中添加 mime类型  类型扩展   .manifest   mime类型   application/x-ms-manifest

                     2.  建立 manifest 类型的文件 index.manifest 一下是内容

                                               CACHE MANIFEST

                                               #v1    修改这里manifest就会更新

                                               CACHE: 

                                                   #缓存的资源文件 可以 使用*.*

                                               NETWORK:

                                                  #不进行资源文件 可以 使用*.*

                                                FALLBACK:

                                                   #无法和因特网连接替代制定页面文件中的内容  (需要代码测试)

                        注意: 

                          1) network: 写上 ajax 请求的地址 

                           2)站点离线存储容量限制是5M (需要在node-webkit 中进行代码测试)

                           3)manifest 和 html在同源 用一个域 下

                           4) CACHE MANIFEST  必须在manifest文件的第一行

                           5) manifest文件中 CACHE NETWORK FALLBACK 位置关系不是很大,

                           6)  FALLBACK中的资源和manifest文件是同源

                           7)当一个资源被缓存后,浏览器直接请求这个资源的绝对路in个也会访问缓存中的资源

                           8) 没用引入 manifest 文件的页面 无法使用 manifest 中的资源, 

                           9) manifest任何一个资源更新都会导致manifest所有资源的更新 (这种更新是一场灾难,浪费流量)
                          10) 资源本身更新 不会更新 必须 修改 manifest 版本号码 才会更新

                          11) 图片资源更新 修改 manifest 版本号码缓存中的图片也不会更新 需要更换图片的名称在更新 manifest版本号码才会更新(结果通过代码测试得出).

                     3.在html标签中添加  

                                    <html lang="en"  manifest="index.manifest"> 

                                    </html>

                    4. applicationCache JS 事件

                                    applicationCache.onchecking=function(){} //检查浏览器是否支持 app cache

                                    applicationCache.ondownloading=function(){}  //下载文件中  callback

                                    applicationCache.onnoupdate=function(){}  //更新文件  callback

                                    applicationCache.onprogress=function(){}  //下载周期触发  callback

                                    applicationCache.oncached=function(){}  //下载周期触发 缓存成功  callback

                                    applicationCache.onupdateready=function(){}  //缓存更新前 调用  callback

                                   applicationCache.swapCache=function(){}  //更新缓存  主动

                                    applicationCache.onobsolet=function(){}  //未找到 文件 报错 callback              

applicationCache.onerror=function(){}  //其它错误

                  做的事情: 1缓存 不经常更新 页面 资源  文件  理想很丰满,显示很骨感. 它只能打打下手,不能完成主要的升级更新的缓存功能 因为JS操作其中某一项资源.localstorage 完成主要功能.

                                                                                                                                                                                                                                                            ------------------------------HCM

HTML5新特性之离线缓存技术

一、离线缓存的起因: HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定, 依赖无线信号,网络的可靠...
  • u013084331
  • u013084331
  • 2016年04月12日 16:34
  • 12382

android中如何实现离线缓存

离线缓存就是在网络畅通的情况下将从服务器收到的数据保存到本地,当网络断开之后直接读取本地文件中的数据。 将网络数据保存到本地: 你可以自己写一个保存数据成本地文件的方法,保存在androi...
  • Working_Harder
  • Working_Harder
  • 2016年08月21日 22:17
  • 3032

iOS开发 最新的NSURLProtocol之webView的离线缓存,缓存webView,离线加载

一:前言:项目中整个一tab页因为需求变成了加载webView,没网情况下会一片白。。很多APP无网显示的是一张图片,笔者强迫症,坚决做到最好的用户体验,于是缓存了整个webview;   1. 想通...
  • horisea
  • horisea
  • 2016年12月22日 17:22
  • 3272

Web前端离线缓存应用

项目中需要将在线的Web改造成支持离线版本的Web应用,思考了四种方法: 1.Manifest文件 它的特点有以下三点: 1.1 Manifest文件有变化才有更新 1.2一次必须更新完Man...
  • z127688
  • z127688
  • 2015年07月26日 18:34
  • 688

android离线缓存技术

离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻、知乎等等)都是支持离线缓存的,这样带来...
  • xiangzhihong8
  • xiangzhihong8
  • 2016年03月20日 15:16
  • 2727

离线缓存与客户端存储总结

离线缓存与客户端存储总结
  • liujie19901217
  • liujie19901217
  • 2016年03月23日 19:18
  • 4376

HTML5 离线缓存DEMO示例

1.index.manifest文件配置 CACHE MANIFEST #chrome浏览器支持,火狐浏览器支持度不够好 #version 1 #author by guoquanyou #CACH...
  • guoquanyou
  • guoquanyou
  • 2016年06月15日 14:15
  • 2706

Hybird-App离线缓存系统

Hybird-App离线缓存系统目录 背景 接口格式 离线资源包格式 离线资源下发 离线资源缓存 背景由于线上乐刻客户端 App 第一次打开平台 H5 需要几秒的加载时...
  • cool720
  • cool720
  • 2017年05月28日 00:21
  • 457

hybird架构之离线缓存

hybird架构的优缺点现在越来越多的应用采用hybird架构进行移动app开发了,主要是其有以下几个优点: 1. H5开发效率高、跨平台、低层本 2. H5从业务开发上讲,没有版本问题,有B...
  • szyangzhen
  • szyangzhen
  • 2017年05月21日 17:22
  • 480

H5离线缓存总结

看完慕课H5离线缓存的视频以及三天了,由于有事情一直耽误了,今天总结一下,希望对自己的前端学习能有所帮助。 首先关于存储有以下集中方式:1>cache:缓存为了让从DB/磁盘拿出来的东西放到缓存(放于...
  • Alin_leeon
  • Alin_leeon
  • 2016年05月14日 21:23
  • 8218
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-离线缓存-升级项目笔记一
举报原因:
原因补充:

(最多只允许输入30个字)