hybrid在大前端的韩流中你自我增值必懂的一个点

知识点

1. hybrid 是什么
2. 存在的价值，为什么要用
3. webview
4. file:// 协议
5. hybrid 实现流程
6. hybrid 更新上线流程
7. hybrid 和 h5 的区别

hybrid 是什么

• hybrid 即“混合”，即前端和客户端的混合开发

• 需前端开发人员和客户开发人员配合完成

• 某些环节也可能涉及到 server 端

不要以为自己的前端就可以不想去理客户端的知识

存在的价值

• 可以快速迭代更新(无需 app 审核，思考为何?)

• 体验流畅（和NA的体验基本类似）

• 减少开发和沟通成本，双端公用一套代码

为什么无须审核：原生app 开发都有权限访问手机比较安全的东西，用这个开发出来肯定得审核，而 hybrid 是用前端开发的是没有权限获取手机更深层的 API，所以相对安全是没有审核的。

webview

• 是 app 中的一个组件( app 可以有 webview,也可以没有)

• 用于加载 h5 页面，即一个小型的浏览器内核

file:// 协议 与 http(s)协议

什么是 File协议

File协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样。

如何使用File：

要使用File协议，基本的格式如下：file:///文件路径，比如要打开F盘flash文件夹中的1.swf文件，那么可以在资源管理器或浏览器地址栏中输入：file:///f:/flash/1.swf回车

HTTP超文本传输协议

HTTP是用来在WWW上交换文件（文本，图形，声音，动画等）的规则集。相对于TCP/IP协议族（它是网上交换信息的基础），HTTP是应用协议。

ftp的协议和http协议的主要区别在于ftp是需要用户名和密码才能访问（匿名登陆除外），这样做的目的在于有的文件只供特殊人访问，而http协议是任何人都可以访问的

hybrid 实现流程

不是所有的场景都适合使用 hybrid:

• 使用 NA: 体验要求极致，变化不频繁( 如头条首页)

• 使用 hybrid: 体验要求高，变化频繁（如头条的新闻详情）

• 使用 h5: 体验无要求，不常用(如举报，找反馈等页面)

具体实现

• 前端做好静态页面(html js css),将文件交给客户端

• 客户端拿到前端静态页面，以文件形式存储在 app 中

• 客户端在一个 webview 中

• 使用 file 协议加载静态页面

hybrid 更新上线流程

• 分版本号，有版本号，如 20180622105355

• 将静态文件压缩 zip 包， 上传到服务端

• 客户端每次启动，都去服务端检查版本号

• 如果服务端版本号大于客户版本号，就去下载最新的 zip 包

• 下载完成之后解压包，然后装饰现有文件覆盖

hybrid 和 h5 的区别

hybrid 优点

1. 体验更好，跟 NA 基本一致
2. 可快速迭代，无需 app 审核

hybrid 缺点

1. 开发成本高峰。联调，测试，查 bug 都比较麻烦
2. 运维成本高。参考更新上线的流程

hybrid 适用场景

• hybrid ：产品的稳定功能，体验要求高，迭代频繁

• h5: 单次的运营活动（如 xx 红包）或还常用功能

愿你成为终身学习者