Blend 离线缓存方案.pdf

Blend 离线缓存⽅案 在 webapp 开发中，数据存储和离线可访问是每个开发者遇到的难题，也是影响⽤户 体验的 要⼀环；为了克服缺陷，HTML不断推出新接⼝，从Cookie延续到 localStorage 、 Web SQL DataBase和AppCache，但现存的接⼝依然存成如下问 题： 1. 存储量有限，存储形式太过单⼀； cookie存储数量和⼤⼩都有所限制，存储形式上按照字符串进⾏拼接； 新推出的 localStorage对cookie有很好补充作⽤，提供key-value键值对存储，但⼤⼩依然受 限，不提供结构化存储； 2. 系统⽀持程度不统⼀，⽆法保证成功率； a droid分⽀越来越多，对应的web api⽀持情况也更加多样；如对结构化存储⽀持很 好的i dexedDB接⼝，必须运⾏在a droid⼤于4.3 ，ios⼤于8.1的版本；接⼝⽀持的不 统⼀，很难保证成功率； 3. ⽆法满⾜对⽂ 内容的存储和获取； 现在还没有接⼝可以读取和存储⽂件, 为了保证离线可访问必须对⽂件内容进⾏存 取； 4. ⽆法实时更新，最终结果⽆法预料； ⻚⾯采⽤Cache Ma ifest可实现⻚⾯离线可访问， 但⽤户⽆法实时更新，内容更新之 后须修改配置⽂件当⽤户第⼆次刷新时可看到新的内容； 5. 接⼝使⽤太过复杂，各个接⼝互相孤⽴; 保证webapp离线可访问是个系统⼯程，牵涉到存储、⽹络检测、⽂件读取、安全 等，现存的接⼝是不同时期推出，每个接⼝仅是为了解决局部问题引⼊，没有系统性 的集合起来供⽤户使⽤； 从分析情况来看，依靠纯web提供的接⼝⽆法完全满⾜需求，百度Clouda+近期1.2版 本发布，提供了另⼀种离线缓存⽅案； Clouda+离线⽅案 通过分析web提供的api，须在⾃⼰控制的系统中设计⼀套独⽴的API，需要有下⾯⼏ 个模块： 存储模块 为了提⾼检索速度，⽀持结构化存储和索引查询数据；因要存储⼤量静态资源⽂ 件，存储⼤⼩应该不受限制； ⽹络模块 此模块内可以拦截⽹络请求，对拦截的请求内容存储到本地，保证离线时获取； 还可以对⽹络情况进⾏判断，使其从不同渠道获取内容； ⽂件模块 拦截了请求之后，下⼀步就必须把此请求的⽂件内容进⾏存储或者读取，⽂件 I/O操作必不可少； 安全模块 数据下载到了⼿机空间中，必须对⽂件进⾏安全加密和访问限制，保证数据安全 Clouda+的Ru time提供了webapp运⾏环境，此⽅案设计也架构在了Ru time之中， 下⾯是其架构图： ⽹络拦截和⽹络环境模块提供⽹络接⼝，通过对⽹络环境的判断来确定是否拦截⽹络 请求；数据存储模块是个精简的数据库系统，⽤户可存储或者索引数据；⽂件存储提 供了对⽂件的下载和读取；访问策略和安全加密提供了安全模块，来限制⽂件的⾃由 读取； ⽅案优势 1. 存储量不再受限制； 存储量仅和⽤户⼿机空间⼤⼩相关； 2. ⽀持了⽂ 下载和读取； 通过对⽂件下载和读取接⼝，⽤户可以把图⽚、⻚⾯内容或者数据等⽅便下载到⼿机 空间中，突破web⽆法操作⽂件的限制； 3. 不受⼿机⾃身webview版本的限制； Clouda+的数据或者⽂件存储都是依靠框架⾃身能⼒实现，不依赖⼿机本身，也就是 只要升级到Clouda+必威体育精装版版本，都完美⽀持此功能； 4. 离线访问可⾃由控制，保证实时性和离线可访问性； Clouda+设置了拦截器开关，可⾃由拦截⽹络资源，是否⽤离线数据⽤户可⾃由控 制； 5. 对接⼝就⾏了整合封装，⼏乎可零配置⽀持⽹络资源离线访问； Clouda+对各个接⼝基础上进⾏了封装，⽤户⼏乎零配置就可以让其webapp⽀持离线 访问； 如何使⽤ 使⽤Clouda+离线缓存技术必须在其提供的Ru time环境下进⾏开发, 引⼊clouda+⼊ ⼝脚本⽂件loader ；提供了智能的离线缓存和 动调⽤⽅式： 智能化配置 1. ⾸⻚载⼊cache模块且进⾏初始化； Blend.lightInit({ ak: xxxxxxxxxx, // 百度开发者平台提供的appKey module: [cache] }, unction(){ Blend.device.cache.init()；// 加载完成后初始化 })； 2. ⻚⾯head头部引⼊meta标签，配置需要缓存的资源； 如⾃动缓存图⽚资源侧添加如下：