前端 - App类型

澹台鸿光
2023-12-01

参考博客:H5 手机 App 开发入门:概念篇H5 手机 App 开发入门:技术篇

手机App类型分为以下三种

  • 原生应用(native application,简称 native App)
  • Web 应用(web application,简称 Web App)
  • 混合应用(hybrid application,简称 hybrid App)

原生应用

需要在应用市场下载

优点

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

存在问题

  1. 组建的团队大
  2. 原生 App 使用底层操作系统的语言,都是很重的编译型语言,开发和调试成本相对较高,时间周期长
  3. 原生 App 必须下载安装才能使用,只要升级版本,就必须重新下载安装。用户往往不愿意更新版本,厂商被迫不得不长期支持很久以前的旧版本

Web应用

Web App 是使用网页做的应用程序,必须在浏览器中使用,比如,你在浏览器中收发邮件,就是在使用 Web App

优点

  1. 不需要下载安装,打开浏览器就能使用,而且总是使用最新版本
  2. 对于开发者来说,Web App 写起来比较快,调试容易,不需要应用商店的批准就能发布

存在问题

  1. 浏览器提供的 API(即 Web API)很有限(目前只有相机、GPS、电池等少数几个),大部分系统硬件都不能通过网页访问,也无法直接读取硬盘文件,所以 Web App 无法充分利用平台的硬件
  2. 网页通过浏览器渲染,性能不如原生 App,不适合做性能要求较高的页面

渐进式 Web App(Progressive Web App),PWA

Chrome 团队开发的新技术,解决Web App存在的以下问题

  1. 不能从手机的首屏直接进入
  2. 缺乏手机状态栏和锁屏时的通知推送能力
  3. 不支持脱机访问(即断网也能使用)

PWA可以把网站缓存在手机里面,供离线时使用,还能在手机首屏生成图标,直接点击进入;并且有通知推送能力,也不带有浏览器的地址栏和状态栏,跟原生 App 的使用体验非常接近。但是,PWA 需要浏览器访问一次网站,才能在首屏生成图标,并且目前 iOS 系统的支持还不够理想,所以还只是一项探索性质的技术,迄今为止缺乏足够的成功案例

混合应用 Hybrid App

原生 App 与 Web App 的结合它的壳是原生 App,但是里面放的是网页。 可以理解成,混合 App 里面隐藏了一个浏览器,用户看到的实际上是这个隐藏浏览器渲染出来的网页。微信小程序也属于混合应用

混合 App 的原生外壳称为"容器",内部隐藏的浏览器,通常使用系统提供的网页渲染控件(即 WebView 控件),也可以自己内置一个浏览器内核。

结构上,混合 App 从上到下分成三层:

  • HTML5 网页层
  • 网页引擎层(本质上是一个隔离的浏览器实例)
  • 容器层

API Bridge

也称JSbridge,网页层通过 JSbridge 调用原生API。混合 App 里面的网页不同于普通网页,可以调用底层系统所有的 API,奥秘就在于外层容器提供了 API Bridge,充当底层 API 的中介,允许内部的网页调用底层。所谓 API Bridge 就是容器在底层接口和网页之间,建立一座桥梁,让双方通信。容器一旦接到网页的请求,就根据请求去调用底层系统的 API,然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供,方便网页调用,这时又称为 JSbridge(如微信的JS-SDK)

技术栈

  • PhoneGap
  • Cordova
  • Ionic

混合App优点

  1. 跨平台:Web 技术是跨平台的,开发者只写一次页面,就能支持多个平台。也就是说,混合 App 只需要一个团队就够了,开发成本较低
  2. 灵活性:混合 App 的灵活性大,很容易集成多种功能。一方面,混合 App 很容易加载外部的 H5 页面,实现 App 的插件结构;另一方面,Web 页面可以方便地调用外部的 Web 服务
  3. 开发方便:Web 页面的调试和构建,远比原生控件简单省时。页面的更新也容易,只要在服务器上发布新版本,触发容器内更新就可以了

混合App存在问题

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

跨平台 App 技术栈

跨平台技术栈指的是使用一种技术,同时支持多个手机平台。它与混合技术栈的区别是,不使用 Web 技术,即它的页面不是 HTML5 页面,而是使用自己的语法写的 UI 层,然后编译成各平台的原生 App。混合技术栈和跨平台技术栈的基础,都是原生技术栈,因为最终都要编译成原生App,所以,不管使用哪一种技术栈,多多少少要了解一些各平台的原生技术。

技术栈

  • React Native: 使用 JavaScipt 语言编写页面
  • Xamarin:使用 C# 语言编写页面
  • Flutter:使用 Dart 语言编写页面

上面的混合技术栈使用 HTML 语言编写页面,再用 WebView 控件加载页面,所以只写一次页面,就能支持多个平台。跨平台技术栈也能做到多平台支持,但是原理完全不同。跨平台技术栈的框架,都是使用自己的语法编写页面,不使用 Web 技术,编译的时候再将其转为原生控件,或者使用自己的底层控件,生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。

React Native原理

注意,React Native 虽然也使用 JavaScript 语言,并且写法看上去像 Web 页面,但其实所有控件都是自己定义的,编译时再一一翻译为对应的原生控件。举例来说,React Native 的文本渲染控件是<Text>,翻译成 iOS 控件为UIView,翻译成安卓控件为TextView

React Native 的问题

React Native 的想法虽然很美好,但是实际开发中出现了各种各样的问题。最主要的一个问题是, UI 抽象层翻译出来的 iOS 和安卓原生页面,做不到完全一致,尤其是复杂页面,样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常,另一个会出现各种奇怪的小毛病。如果你想用 React Native 做到 iOS 和安卓体验一致,并且充分发挥原生控件的功能,就需要同时熟悉 React Native、iOS、安卓三个平台,这对开发者的要求实在太高了。

 类似资料: