关闭

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

228人阅读 评论(0) 收藏 举报
分类:

项目需求: 产品  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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1049次
    • 积分:45
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
    HTML5
    此目录上 将放一些 我平时在移动上面的研发HTML5的经验总结 包括 HTML标签 CSS样式 JS ajax通信.
    android研发
    在安卓上面的一些总结.
    nodejs
    nodejs研发经验总结