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

项目需求: 产品  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.οnprοgress=function(){}  //下载周期触发  callback

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

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

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

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

applicationCache.οnerrοr=function(){}  //其它错误

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

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值