缓存策略
标签(空格分隔): 会友行
参考资料链接
【Web缓存机制系列】4 – HTML5时代的Web缓存机制
【Web缓存机制系列】5 – Web App时代的缓存机制新思路
【Web缓存机制系列】6 – 进击的Hybrid App,量身定做缓存机制*
了解云集运行环境-W3C Web App Manifest
crosswalk hybrid app framework
Resource Bundles
best-of-both-worlds-mixing-html5-native-code *
混合App缓存策略的关键,在原生和web交界页面处,原生和web之间的切换越多,缓存的更新难度就越大。
单页面应用缓存-数据层
缓存Ajax请求
由于顶级框架页面是不会由于调整刷新而导致javascript上下文丢失,所以底层或各个模块所需要的Ajax请求,都是可以通过顶级框架统一请求后,并以信息服务的形式对外提供Api调用。对于一些实时性要求不是很强的请求来说,可以由顶级框架做统一缓存,定期更新。这种做法可以不影响用户体验的前提下,明显减少请求数,降低网络流量,并间接减轻了服务器的压力
一个实践是:顶级框架在hybrid app 里面可以理解为从原生切换到web的第一个web页面,在单页面应用中,首个页面会加载web app运行所需的绝大多数基础文件,通过如 require.js 异步按需加载首页后各个页面所需要的js文件,如页面的 控制器.js,数据模型.js;通过ajax请求,异步加载html文件,通过控制器.js 和 前端模板渲染,再输出到浏览器。
如果一系列的页面都要用到相同的数据源,可以考虑把数据 存储到 浏览器localStorage里,后续页面从 localStorage 里面读取数据。推荐使用store.js进行存储的操作。另外的一些选择是,webSql,indexedDB 等,localStorage方案,兼容性相对会好一些。
通过Javascript实现内存缓存
跟缓存Ajax请求的结果类似,程序运行过程中的其他数据,其实也可以采用类似的方式在顶级容器的Javascript上下文中缓存。
客户端提供缓存读写能力
我们知道,HTML5的localstorage仅仅只能支持5m的存储。我们可以按localstorage的设计思路,让客户端为Web定制更大,更灵活的本地存储功能。到时,Web缓存能做的事情就会更多。
通过WebViewJavascriptBridge可以很轻松的实现这个功能。
单页面应用缓存-视图层
manifest
1、第一次必须联网,在移动网络下首次打开效果非常不理想
2、http 头设置会导致 manifest 无法正常更新,见 http://www.alloyteam.com/2012/01/html5-offline-app-update-problem/
3、Manifest 中缓存文件一旦下载出错,后续的文件将不再下载,抛出错误事件,见:http://stackoverflow.com/questions/6666513/html5-manifest-caching-error
4、Android 系统版本众多,较低版本的浏览器对 manifest 支持不完善
5、引用 manifest 的 html 页面本身也会被缓存
由于坑太多,既然有native的本地资源,所以决定模仿 AlloyKit 的资源本地化方案。
Alloykit - 本地化模块
|AlloyTeam未开源 AlloyKit模块
架构图
html存入代码bundle
缺点:
存在严重的更新问题
每次发版的时候,html内去除动态语言很累人
但是技术成本还是蛮低的。