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

阅读更多
个人分类: HTML5
想对作者说点什么? 我来说一句

html5离线缓存简单demo

2015年09月13日 13KB 下载

HTML5-俄罗斯方块

2016年10月15日 37KB 下载

离线缓存demo

2017年04月24日 27.42MB 下载

HTML5-动画小剧场图片资源

2016年09月03日 7.75MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭