煮杯热茶

H5 手机 App 开发

阅读这篇文章在新窗口打开有感，将好的地方摘录下来。

H5 含义

表面上看，手机 App 都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App 可以分成三大类。

  • 原生应用（native application，简称 native App）
  • Web 应用（web application，简称 Web App）
  • 混合应用（hybrid application，简称 hybrid App）

优缺点

原生应用

优点：

  1. 较好的性能和体验。

  2. 可以使用系统的所有硬件和软件 API，比如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力。

缺点：

  1. 原生 App 的缺点主要是成本，每个手机平台都要建立一个独立的开发团队，大公司一般都有 iOS 和安卓两个开发团队。如果出现第三个平台（以前的 Windows Phone，也许将来的华为鸿蒙 OS），就要组建第三个团队，成本就更高。

  2. 原生 App 使用底层操作系统的语言，都是很重的编译型语言，开发和调试成本相对较高，时间周期长。

  3. 原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本。

Web 应用

优点：

  1. 不需要下载安装，打开浏览器就能使用，而且总是使用最新版本。

  2. 对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布。

缺点：

  1. 浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件。

  2. 网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面。

Web App 也不是毫无竞争力。根据调查，普通用户每月平均使用27个原生 App，但访问了100多个手机网站。这意味着，用户的 App 使用时间都被头部 App 占据了，小公司的 App 使用频率非常低，获客成本极高，最终变成僵尸 App。因此，小公司开发 Web App 更划算，不仅成本低，而且可以服务更多的用户，以及更好地宣传自己（可以被搜索引擎收入）。

混合应用

概念：

混合 App （hybrid App）顾名思义就是原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。 可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。

混合 App 的原生外壳称为"容器"，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即 WebView 控件），也可以自己内置一个浏览器内核。结构上，混合 App 从上到下分成三层：HTML5 网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。

混合 App 里面的网页不同于普通网页，可以调用底层系统所有的 API。奥秘就在于外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。

所谓 API Bridge 就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的 API，然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge。

不同容器的 API Bridge 是不一样的。为某个容器写的网页，不能放在另一个容器使用，也无法在浏览器使用，除非网页脚本做了兼容处理。

容器提供的 API Bridge 必须跟着平台更新。比如，iOS 发了新版本，有了新的硬件 API，容器也必须跟着推出新版的 API Bridge。如果容器没有跟上，开发者为了使用新的硬件，就只能想办法自己来写缺失的 API Bridge。

优点：

  1. 跨平台 Web，开发者只写一次页面，就能支持多个平台。也就是说，混合 App 只需要一个团队就够了，开发成本较低。

  2. 混合 App 的灵活性大，很容易集成多种功能。一方面，混合 App 很容易加载外部的 H5 页面，实现 App 的插件结构；另一方面，Web 页面可以方便地调用外部的 Web 服务。

  3. Web 页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了。另外，Web 开发人员也比较容易招聘，传统的前端程序员可以承担开发任务。

缺点：

  1. 混合 App 的主要缺点是，由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生 App，而且由于 WebView 不是全功能浏览器，可能比 Web App 都要慢一些。

  2. 由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生 App。举例来说，早期的时候，安卓有物理的后退按钮，iPhone 没有，页面设计不得不考虑这一点。

WebView 控件

原生、混合或 Web，不管什么技术，最终在 App 里面显示网页，一定需要一个网页引擎，这样才能解析网页。

通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。

不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。

小总结

  1. 原生技术栈的技能和体验最好，对于复杂的大型 App，如果条件允许，应该采用这种方式开发。

  2. 混合技术栈的成本低，灵活性好，对性能要求不高的简单 App，尤其是纯展示性的页面，可以采用这种方式开发。

  3. 跨平台技术栈适用于，存在外部或内部条件的限制，只有一个团队开发跨平台 App 的情况。