原生APP和Web APP的区别

最新推荐文章于 2022-08-24 23:29:46 发布

似曾相识-

最新推荐文章于 2022-08-24 23:29:46 发布

阅读量8.1k

点赞数 3

分类专栏：前端性能/框架移动端H5/CSS3 文章标签： web app 原生app

前端性能/框架同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

移动端H5/CSS3

18 篇文章 0 订阅

订阅专栏

Native App开发
Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
Web App开发
Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。
Web APP应用呈现以下特点：
（1）每次打开APP，都要通过APP框架向云网站取UI及数据；
（2）手机用户无法上网则无法访问APP应用中的数据。
（3）框架型的APP无法调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）
（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；
（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；
（6）APP用户每次都可以访问到实时的最新的云端数据；
（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互；
适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
Native App（原生型APP）应用呈现以下特点：
（1）每次获取最新的APP功能，需要升级APP应用；
（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；
（3）手机用户无法上网也可访问APP应用中以前下载的数据。
（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）
（5）APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。
适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
移动Web无所不在，移动Web是目前唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；而开发Native App可以充分利用设备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，Native App是最佳的选择。

（1）开发方面

   原生App

⊙ 每一种移动操作系统都需要独立的开发项目
⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等
⊙ 需要使用各自的软件开发包，开发工具以及各自的控件 
    移动Web App
⊙ 因为运行在移动设备的浏览器上，所以只需要一个开发项目
⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）
⊙ 这里可没有标准的SDK，基本任意选择别忘了有一些跨平台的开发工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。 

（2）能力方面 

原生App
⊙ 能够与移动硬件设备的底层功能，比如个人信息，摄像头以及重力加速器等等
    移动Web App
⊙ 只能使用有限的移动硬件设备功能。

（3）获取方法 

原生App
⊙ 直接下载到设备
⊙ 以独立的应用程序运行(并不需要浏览器)
⊙ 用户必须手动去下载并安装这些原生App
⊙ 有一些商店与卖场来帮助用户寻找你的App，目前app市场不计其数，比较有名气的有：

360手机助手：http://zhushou.360.cn/
安卓市场：http://apk.hiapk.com/
机锋市场：http://apk.gfan.com/
酷玩汇（91）：http://play.91.com/
百度移动应用：http://as.baidu.com/
碗豆荚：http://www.wandoujia.com/apps
青年应用汇：http://www.youthapp.cn/
木蚂蚁：http://www.mumayi.com/
安智：http://www.anzhi.com/
应用汇：http://www.appchina.com/
乐商店：http://app.lenovo.com/
飞流：http://www.feiliu.com/html/index.html
小米：http://app.xiaomi.com/
N多网：http://www.nduoa.com/ 

   （4）移动Web App
⊙ 从移动设备上的浏览器访问
⊙ 不需要安装额外的软件
⊙ 软件更新只需要服务器就够了
⊙ 因为现在没有什么商品或卖场提供这种App，所以如何搜索这些移动Web App相当不简单

（5）版本控制

原生App
⊙ 用户可以自由地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况
  移动Web App
⊙ 所有的用户都是用同样的版本

优势

原生App
⊙ 比移动Web App运行快
⊙ 一些商店与卖场会帮助用户寻找原生App
⊙ 官方卖场的应用审核流程会保证让用户得到高质量以及安全的App
⊙ 官方会发布很多开发工具或者人工支持来帮助你的开发
  移动Web App
⊙ 跨平台开发
⊙ 用户不需要去卖场来下载安装App
⊙ 任何时候都可以发布App，因为根本不需要官方卖场的审核
⊙ 如果你已经有了一个Web App，你可以使用 responsive web design来辅助改进(这也是优势？)

缺陷

原生App

⊙ 开发成本高，尤其是当需要多种移动设备来测试时
⊙ 因为是不同的开发语言，所以开发，维护成本也高
⊙ 因为用户使用的App版本不同，所以你维护起来很困难
⊙ 官方卖场审核流程复杂且慢，会严重影响你的发布进程 

    移动Web App

⊙ 无法使用很多移动硬件设备的独特功能
⊙ 要同时支持多种移动设备的浏览器让开发维护的成本也不低
⊙ 如果用户使用更多的新型浏览器，那问题就更不好处理了
⊙ 对于用户来说，这种App很难被用户发现

原生App 与 移动Web App:您如何选择？

所以在你准备做移动App时，你应该先问问自己以下几个问题：
1. 你的应用是否需要使用某些设备的特殊功能，比如摄像头，摄像头闪光灯或者重力加速器
2. 你的开发预算是多少？
3. 你的应用是否一定需要网络
4. 你的应用的目标硬件设备是所有的移动设备还是仅仅只是一部分而已
5. 你自己已经熟悉的开发语言
6. 这个应用对于性能要求是否苛刻
7. 如何靠这个应用赢利
我想这几个问题应该能让你做出明智的选择。 

结论：

是原生App还是移动Web App，主要受商业目标，目标用户，以及技术需要这些因素影响的。其实更多时候你也不要为选择那种App模式烦恼，正如本文提到，类似Facebook这样的公司就为用户提供了两种选择。然而对于大部分人来说，预算，资源限制将会逼迫我们只能选择其中一种（或者只能以其中一种为重点）。

扩展：

1、如何判断app中原生页面和h5 页面？

纯粹的HTML5应用很少，甚至只有一个view是用WebView/UIWebView的方式越来越常见了。
基本上只要对那个view长按，然后看是不是有反应，比如手机震动（Android）、或者出现文字选择粘贴（Android/iOS），那么就是WebView！

2、如何判断一个 app 是原生还是 webapp，或者是两者结合的？

      
      （快速）滚动起来是否比较卡
图片加载失败的图标
      
      
       
       

      
      
      
      
       
       

      
      
      
      
       
       3、app中html5页面和原生native页面的区别？
      
      
      
      
       
       你想说的是怎么判断app里面哪些是app原生写的哪些是html代码是么？
要是是这样的话。有一种可以试一试。也就是你把手机的网络断掉。然后点开你的页面。然后可以正常显示的东西就是原生写的。显示404或则错误页面的是html页面

      
      
      
      
       
       

      
      
      
      
       
       

      
      
      
      
       
       4、
       
        
       
       Android如何区分app原生和webview实现？
      
      
      
      
       
       
       
       在开发Android app时，特别是强内容展现型的功能，会想在原生native实现和web实现中做选择，做这种选择的时候，难免想看看竞品或其它app类似功能是用哪种方式实现的。但是如何判断其它app是用原生控件实现还是用webview载入网页来实现呢？其实要想做到这一点不难，至少有两种办法：
       
       一、抓包
       
       这是比较原始，也是比较容易想到的，打开相应界面，抓取数据包看看，如果有url是返回比较完整的html代码，那基本就是webview来实现的了。
       
       二、利用系统开发人员工具
       
       抓包的方法还是太麻烦，很多系统有更高级的开发人员工具功能，一般在设置里可以找到，有些手机可能需要特殊的操作才能打开开发人员工具功能。以meizu mx2为例，在拨号界面输入 *#*#6961#*#* 打开“开发人员工具”功能（输入 *#*#6960#*#* 关闭），点击“设置”->“辅助功能”->“开发人员工具”，在绘图栏中找到“显示布局边界”并打开。这样所有应用的控件布局都一目了然了，webview作为一个控件，只有一个边界框，所以通过这一点，就比较容易区分出一个界面是webview实现的还是native布局控件实现的，当然也不排除用一堆webview来拼成一个界面的实现方法。
       
       如下图是一个native与webview混排的界面，蓝色线框是各控件的绘制边界，中间那一大块布局丰富的界面没有显示出很多边界蓝线，就是网页实现的。
       
       
       
       除了上面两种方法，一般来说，通过断开网络，刷新界面，观察内容缓存情况也可以对实现方式有个大致预判断，一般来说缓存做得好的，都是原生控制实现的，有界面局部缓存的就更大可能是原生的了。