在Android, IOS平台上做Native App的开发，碰见了一些问题，Hybrid App的架构应运而生，这个PPT先宏观介绍了Hybrid App的架构，然后具体讲了内嵌web的存储方面的技术。希望对您有所帮助。

1. Eric.Xiao
ericssonxiao@gmail.com
http://www.linkedin.com/in/ericssonxiao

2. Hybrid App

3. 目前碰到的问题是什么？
ž 弱网络或短暂无网络情况下，用户使用客
户端的问题。
ž 开发一个Native App的应用，费时，费力，
成本高，所以想要降低成本。
ž 学习一下Java语言当时的口号，一次编
译，到处运行，所以想要跨平台，一份代
码搞定所有问题。
ž 到发版的时候，各种发版，各种平台，还
有苹果平台的审核，长达一个月，都有可
能。

4. 目前碰到的问题是什么？
ž 发了版本了，出BUG了，无法改，只好
等待下一版本。
ž 再来谈谈工程化，敏捷软件开发，想要快
速迭代。
ž Native App 平台依赖强，升级成本高
ž JS跟CSS，依赖于后端产出的HTML
ž 有的业务逻辑在前端，有的在Model层，
更多的是在View层

5. 比较一下吧！

7. 再来一个趋势图

8. 我们的愿景是：
ž App可以随时发版，解决各种线上问题
ž App可以离线使用，不依赖平台，减少用
户升级版本时，造成的用户流失。
ž App开发快，可迭代，可以并行开发，前
后台分离，职责清晰。
ž App可以唤起手机的各种功能
ž App可以插件式的升级各种功能
ž App便于测试，可以做UI自动化测试，及
其他各种自动化测试。

9. 我们的选择是：

10. 原来的系统

11. 新系统设计

12. 为实现新系统，引入NodeJS
ž 前端熟悉的语言，學習成本低
ž 都是JS，可以前后端复用
ž 体质适合：事件驱动、非阻塞I/O
ž 适合IO密集型业务
ž 执行速度也不差

13. 前后端职责划分：

14. 淘宝使用这样的架构，压测性能
对比

15. 回归正题
ž 先讨论一下Hybrid App 内嵌web部分的
开发

16. 我们的研发工具
ž Yeomanè Yo, Grunt, Bower
ž Javascript + Html5 + CSS3
ž LESS or SASS
ž Node.js
ž Java
ž Redis + Memcached
ž ActiveMQ or Kafka
ž Mysql or MongoDB

17. Yeoman介绍
ž Yeoman是一个工具的集合，包含三个工
具：Yo, Grunt, Bower.

18. Yeoman介绍

19. Yeoman 安装
安装Yeoman的命令：
创建一个新的目录：
运行Yo命令，创建AngularJS项目：

20. Yo 创建AngularJS项目

21. Yo 创建AngularJS项目

23. 创建成功

24. Yo命令

25. Bower命令

26. Grunt 命令

27. HTML5离线存储技术
ž Application Cache
— 本地缓存应用所需文件
ž LocalStorage & SessionStorage
— 键值对（key-value）存储数据
ž Web SQL
— 关系数据库，通过SQL语句访问
ž IndexDB
— 索引数据库

28. Application Cache
ž HTML5支持应用资源的离线存储，每一
个WEB应用可以将网站的静态资源，图
片，js，css等缓存到本地的浏览器中。
ž 通过使用缓存清单（cache manifest）做
控制。
ž 减轻服务器的负载
ž 解决在弱网络或短暂无网络环境下，用户
使用的问题，节省带宽，优化用户体验。

29. Application Cache浏览器支持情况：

30. Application Cache 注意事项
ž 站点离线存储的容量限制是5M
ž 如果manifest文件，或者内部列举的某一个文件不能正常下载，
整个更新过程将视为失败，浏览器继续全部使用老的缓存
ž 引用manifest的html必须与manifest文件同源，在同一个域下
ž 在manifest中使用的相对路径，相对参照物为manifest文件
ž CACHE MANIFEST字符串应在第一行，且必不可少
ž 系统会自动缓存引用清单文件的 HTML 文件
ž manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序
没有关系，如果是隐式声明需要在最前面
ž FALLBACK中的资源必须和manifest文件同源
ž 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问
缓存中的资源。
ž 站点中的其他页面即使没有设置manifest属性，请求的资源如果
在缓存中也从缓存中访问
ž 当manifest文件发生改变时，资源请求本身也会触发更新

31. Web服务器要添加的配置：

32. Manifest 文件
ž Manifest文件有变化才更新
ž 一次必须更新Manifest中的所有文件
ž 下次生效

33. Application Cache更新机制

34. LocalStorage & SessionStorage

35. LocalStorage & SessionStorage
ž HTML5中定义的WebStorage API的规范，
定义了浏览器存储资料的机制，包含
localStorage 和 SessionStorage
ž LocalStorage可以长期存储数据，没有时
间限制，一天，一年，两年甚至更长，数
据都可以使用
ž SessionStorage只有在浏览器被关闭之
前使用，创建另一个页面时同意可以使用，
关闭浏览器之后数据就会消失
ž 最多存储5M的数据

36. LocalStorage & SessionStorage
浏览器支持情况：

37. LocalStorage & SessionStorage
浏览器支持情况：

38. Cookie, LocalStorage,
SessionStorage区别

39. LocalStorage使用
Window.localStorage.setItem(key,value);//存储
数据
Window.localStorage.getItem(key);//读取数据
Window.localStorage.removeItem(key);//删除数
据项
Window.localStorage.clear();//删除所有数据

40. SessionStorage使用
Window.sessionStorage.setItem(key,value);//
存储数据
Window.sessionStorage.getItem(key);//读取数
据
Window.sessionStorage.removeItem(key);//删
除数据项
Window.sessionStorage.clear();//删除所有数
据

41. 为支持多个浏览器，建议使用
Store.js
https://github.com/marcuswestin/store.js.git

42. Web SQL
ž Web SQL不是HTML5规范的一部分，它通
过一套API来操作浏览器中的数据库。
ž 1）打开数据库openDatabase()方法：
— 此方法创建数据库对象，既可以使用已有的数据
库，也可以创建新的数据库。
ž 2）事务transaction()方法：
— 此方法可以用于控制事务处理，执行提交操作或
回滚操作。
ž 3）执行SQL命令executeSql()方法：
— 此方法用于执行SQL查询。

43. Index DB
ž HTML5 的一个重要特性是本地数据持久
性，它使用户能够在线和离线访问 Web
应用程序。
ž IndexedDB API 取代了 Web Storage
API，后者在 HTML5 规范中已不推荐使
用。
ž IndexedDB 具有多个优势，其中包括索
引、事务处理和健壮的查询功能。

44. Web SQL浏览器支持情况：

45. IndexDB 浏览器支持情况：

46. Web SQL

47. IndexDB

48. Q&A

49. Contact Me