web app 、native app、hybrid app比较

柔光的暖阳◎ 2022-03-02 12:21 271阅读 0赞

**1.app的分类**  
大致可以分为这3种：

*  native app（原生app）
 *  web app
 *  hybrid app（混合app）

![Image 1][]

**2.三类app的定义**  
2.1 native app   
中文名称为“原生app”  
基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序，一般开发的语言为Java、C++等。在使用上的具体表现就是，手机桌面上的图标点进去基本就是native app了。

**2.2 web app**  
基于web的系统和应用，运行于网络和浏览器之上，目前多采用h5标准开发。在使用上的具体表现是，手机浏览器点击进入，会有一些应用的小图标，这些小图标在点击后，在浏览器里加载的页面 跟你直接下载一个app后打开的页面是相同的，这些小图标代表的就是web app。

**2.3 hybrid app**  
中文名称是“混合app”  
顾名思义，就是 native app 与 web app的混合。在native app里内置浏览器，合适的功能页面采用网页的形式呈现。比如京东的某些营销页面，今日头条的某些新闻页面、微信的腾讯新闻的内容页面等。

**3.各类app的优缺点**  
**3.1native app**  
**优点：**

*  提供最佳用户体验，最优质的用户界面，流畅的交互
 *  可以访问本地资源
 *  可以调用移动硬件设备，比如摄像头、麦克风等

**缺点：**

*  开发成本高。每种移动操作系统都需要独立的开发项目，针对不同平台提供不同体验；
 *  发布新版本慢。下载是用户控制的，很多用户不愿意下载更新（比如说，版本发布到了3.0，但还是有很多1.0的用户，你可能就得继续维护1.0版本的API）
 *  应用商店发布审核周期长。安卓平台大概要1~3天，而iOS平台需要的时间更长

**3.2 web app**  
**优点：**

*  不需要安装包，节约手机空间
 *  整体量级轻，开发成本低
 *  不需要用户进行手动更新，由应用开发者直接在后台更新，推送到用户面前的都是全新版本，更便于业务的开展
 *  基于浏览器，可以跨平台使用

**缺点：**

*  页面跳转费力，不稳定感更强。在网速受到限制时，很多时候出现卡顿或者卡死现象，交互效果受到限制
 *  安全性相对较低，数据容易泄露或者被劫持

**3.3 Hybrid app**  
这类app集合了上面两种app各自的优势：

*  在实现更多功能的前提下，使得app安装包不至于过大
 *  在应用内部打开web网页，省去了跳转浏览器的麻烦
 *  主要功能区相对稳定下，增加的功能区采用web 形式，使得迭代更加方便
 *  web页面在用户设置不同的网络制式时会以不同的形式呈现（以微信朋友圈为例，在数据流量下，设置APNS为WAP时，微信订阅号内容将屏蔽图片和视频。这样就能为用户省去一部分流量，整个页面阅读就不那么友好了）

另外，为什么有些原生app还会做web app呢？  
以下图为例，这是我的手机浏览器自带的几个web app的图标

![Image 1][]

web app示例

有这么几点原因：

*  数据可以被搜索引擎的爬虫抓到，并进行索引。如果产品只有一个app，那么它的入口独立，但同时数据也是封闭的。如果用户从搜索引擎查找的话，是找不到相关信息的。所以做成web app，可以被搜索引擎找到
 *  用户碎片时间使用，例如一些黏性不高的应用，比如 移动搜索、网址导航等

**4.具体开发过程中，到底该采用哪种类型的app**

*  4.1 如果app中出现了大段文字（如新闻、攻略等），并且格式比较丰富（如加粗、字体多样等），采用H5较好。原因：原生开发对解析json字符串格式不是很友好
 *  4.2 如果讲究app反应速度（含页面切换流畅性），采用原生开发。原因：H5本质上是网页，换网页的时候，基本要加载整个页面，就像一个浏览器打开一个新的网页一样，比较慢，而原生系统只需要加载变化的部分
 *  4.3 如果app对有无网络、网络优劣敏感（譬如有离线操作、在线操作），则采用原生开发。虽然H5可以做到，但是比较敏感
 *  4.4 如果app要频繁地调用硬件设备（比如摄像头、麦克风等），则采用原生开发，这样支持硬件更多，调用速度更快，H5望尘莫及
 *  4.5 如果app用户常见页面频换（如淘宝首页的各种营销活动），采用H5，维护起来更容易
 *  4.6 如果预算有限（H5开发一套可在安卓、iOS、黑莓等跨平台使用）、不在乎用户体验、不在乎加载速度，肯定是H5

另：  
短期活动，专题营销类的页面居多的，可以选择原生app搭建框架，详细页面采用H5,便于活动的随时修改和管理  
主要业务流程方面，选择原生app开发，有更好的用户体验，也可以更方便的拓展其他功能

参考阅读：

1.  [大家公司的app是用原生做的还是h5的呢？][app_h5]
2.  [H5未来真的会取代APP吗？][H5_APP]
3.  [为什么各大公司一直热衷于研究使用web app替换原生app？][web app_app]
4.  [科普：Native App、Web App与Hybrid App][Native App_Web App_Hybrid App]
5.  [Web App 和 Native App，哪个是趋势？][Web App _ Native App]
6.  [关于H5的介绍][H5]

[Image 1]: 
[app_h5]: https://link.jianshu.com?t=http://www.pmcaff.com/discuss/index/635935159261248
[H5_APP]: https://link.jianshu.com?t=http://www.pmcaff.com/discuss/index/1000000000146469
[web app_app]: https://link.jianshu.com?t=http://www.pmcaff.com/discuss/index/1000000000150244
[Native App_Web App_Hybrid App]: https://link.jianshu.com?t=http://www.woshipm.com/pd/321844.html
[Web App _ Native App]: https://link.jianshu.com?t=https://www.zhihu.com/question/19558750
[H5]: https://link.jianshu.com?t=http://www.sohu.com/a/4274793_101278