移动端 Hybrid 开发相关知识
- 2020-07-06
什么是 Hybrid App
Hybrid App其实指的是那些在原生应用开发(ios 应用、android 应用)中嵌入了 H5 技术等的 app。
早在Google推出Android,Apple推出iOS后，就有了 App 开发工程师。早期的 app 基本上都是以原生开发为主，对应工程师开发对应的平台。直到 H5 技术的出现,可以说把Hybrid App带上了高潮。
H5 部分概念
HTML5是在 2014 年 9 月份正式发布的,对标早期的 HTML 版本做了很大的升级，可以说是新开门派了。HTML5正式火爆应该算是在 2015 年之后，正是由于 H5 技术热，带动了原生应用对 H5 技术的升级。
原生应用中的 webview
我们都知道原生应用中提供了一个用来显示网页的组件，在android中提供的是webview，ios7以下是UIWebview，ios7以上是WKWebview。
在 HTML5 大火之前，这些webview可能只是用来承载一些规则页等静态资源，大火之后一些酷炫的功能也可以通过 H5 技术来实现，然后让元生应用来承载这个页面，这样大大提高了开发效率，也增加了别样的用户体验。
Hybrid 的开发形式
- 半 Native 半 web 开发模式
这种模式下,底层功能 API 均由原生容器通过某种方式提供,然后业务逻辑由 H5 页面完成,最终原生容器加载 H5 页面,完成整个 App。
- 纯 web 开发模式
这种模式下,意味着 Native 侧各种类型的 api 都很完善,那么这时候几乎所有与业务相关的逻辑都是放在 H5 页面中的,原生只作为容器存在。
市场上现有 App 开发技术方案
Native App
这种模式即传统的原生 APP 开发模式,Android基于Java语言,底层调用Google的 API;iOS基于Object-C或者Swift语言,底层调用App官方提供的 API。
优点
直接依托于操作系统,交互性最强,性能最好,开发出来的体验最好。
功能最为强大,特别是在与系统交互中,几乎所有功能都能实现。
缺点
开发成本高,开发周期长,无法跨平台,不同平台
Android和iOS需要各自独立开发。门槛较高,原生人员有一定的入门门槛,而且需要学习不同的语言。
更新缓慢,特别是发布应用商店后,需要等待商店审核,特别是 ios 这块。
后期维护成本高,需要维护两套代码。
Web App
这种模式即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站。现有技术一般也会将其只作为PWA模式。
优点
开发成本低,可以跨平台,调试方便,一套代码可以在所有浏览器上跑。
维护成本低,可以自由的进行发版和修复,无需等待审核。
无需安装对应的 app,一个网站就可以轻松访问。
缺点
性能低,用户体验差,直接通过浏览器访问,一些原生的 api 无法使用。
过渡依赖于网络状况,网络差的时候就会产生长时间的白屏等问题,消耗的流量比较大。
临时性入口,用户留存率低,由于无需安装对应的应用,用户可能使用了一次之后忘记了入口。
Hybrid App
这种模式即本文的混合开发,由Native通过JSBridge提供统一的API,然后用HTML5+JS来写实际的逻辑,调用 API,这种模式下,由于Android,iOS的 API 一般有一致性,而且最终的页面也是在webview中显示,所以可以达到跨平台开发的效果。
优点
相对原生开发,开发成本较低,可以跨平台,调试方便。
维护成本低,功能可复用,而且没有更新的限制(指 app 仅提供 api 且 api 没有变更的场景)。
功能更加完善,性能和体验要比起 web app 好许多,一些原生的方法都可以使用。
部分对性能要求较高,或者功能上大都是与原生系统交互的页面可以选择使用原生开发,比较灵活。
缺点
相比原生应用,性能仍然有较大损耗,瓶颈主要在
webview的加载与注入以及本身对webview的限制。不适用于交互性较强的 app,如那些对原生系统依赖较多,动画要求较高的一些应用。
React Native、Flutter 等第三方框架
这种模式下基本都是实现了 Js 开发(RN)或者 Data 语言开发原生 app 的技术，对应的都有一套自己的 AST 树转化规则和生成 UI 视图的机制。可以通过 js 等编写出跨平台 app。
优点
拥有接近原生应用的用户体验,在可以使用原生功能的基础上,开发效率大大提升。
跨平台开发,一套代码可以跑通多端,更新比较方便(指不涉及原生改动),可以直接热修复。
社区比较繁荣,很多功能已有现成轮子,遇到问题可以去社区中找寻答案。
缺点
虽然是跨平台开发,但是某些功能可能单个平台才支持,适配和一些 api 仍需两端独立开发。
学习成本较高,需要额外掌握对应的跨平台开发语言。
TIP
具体要选择什么样的开发模式需要根据实际的业务场景进行选择。
相对于原生开发，Hybrid 开发效率提高了很大，但是同时也损耗了一些用户体验。
Hybrid 通信基本架构
最简单的通信方式如下所示:
Hybrid 通信实现
在实现与 Native 侧交互前,涉及到两个概念。
app 基本上都是与版本有关的,某些版本可能才支持某些特有的功能。
如何知道当前是处于 app 环境中,并且如何获得真实的 app 版本号。
实际开发过程中,我们会把对应的 app 版本等信息挂载到 user-agent 属性上。