微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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.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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。