webAPP 原生APP 对比

Posted web前端开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webAPP 原生APP 对比相关的知识,希望对你有一定的参考价值。

 

Web App即是一种框架型APP开发模式(html5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。

原生APP又称Native App,该开发针对iosandroid、Windows等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

那除了定义中提到两者的构成部分和读取数据的不同以外,还有哪些方面有区别呢?偶从以下几个方面简单阐述一下:

1、开发方面的区别

目前React Native开发越来越火,微信小程序是基于React Native开发的,体验接近原生APP,发展前景值得重视。不过好在现在非原生APP同样可以调用蓝牙、相机等硬件,也能顺利发布到苹果APP store。

移动Web App

  1、因为运行在移动设备的浏览器上,所以只需要一个开发项目

  2、这种应用可以使用HTML5,CSS3以及javascript以及服务器端语言来完成(php,Ruby on Rails,Python)

  3、这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

  1、每一种移动操作系统都需要独立的开发项目

  2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

  3、需要使用各自的软件开发包,开发工具以及各自的控件

2、能力方面的区别

移动Web App

  只能使用有限的移动硬件设备功能。

原生App

  能够与移动硬件设备的底层功能,比如个人信息,摄像头以及重力加速器等等。

3、获取方法的区别

  移动Web App

  1、从移动设备上的浏览器访问

  2、不需要安装额外的软件

  3、软件更新只需要服务器就够了

  4、因为现在没有什么商品或卖场提供这种App,不过一般都是嵌套在系统内部,或者内部系             统中使用

    5、跨平台开发,用户不需要去卖场来下载安装App

      6、需要过度依赖网络,没有任何缓存数据

      7、任何时候都可以发布App,因为根本不需要官方卖场的审核

  8、如果你已经有了一个Web App,你可以使用 responsive web design来辅助改进(这也是优势?)

      9、所有的用户都是用同样的版本

  原生App

  1、直接下载到设备

  2、以独立的应用程序运行(并不需要浏览器)

  3、用户必须手动去下载并安装这些原生App

  4、有一些商店与卖场来帮助用户寻找你的App,app store里面应有尽有。

  5、原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

  6、手机用户无法上网也可访问APP应用中以前下载的数据。

  7、原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

  8、APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

      9、用户可以自由地选择是否更新软件版本,所以会出现不同用户同时使用不同版本的情况

 

即使两者之间有很大的区别,即使H5有一大堆的坑和问题,但是仍旧不妨碍移动WEB无所不在,移动web是目前唯一的支持各种设备访问的平台,也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与PC系统任务有效的结合在一起。而原生native app可以充分利用设备的特性,这一点是它得天独厚的优势。所以,对于一个对于决策者来说,如果你是要做一款体验更好的产品的话,那Native App不妨是最佳的选择。当然如果你想尽快让你的产品占住一席之地的话,力求快速开发、低成本、多平台等等的话,那技术还有很多问题都没有很好解决的H5,也是不错的选择。正式因为它有复杂多变的CSS样式消耗了大量性能,它才有一个更有竞争力的优势——它带来了多样性的排版,能够细致到每一个字宽行高和风格的像素级处理,能够给你带来不一样的图文汇合的排版。我想这些更是H5的优异之处吧。


以上是关于webAPP 原生APP 对比的主要内容,如果未能解决你的问题,请参考以下文章

深入了解浏览器存储:对比CookieLocalStoragesessionStorage与IndexedDB

WebAPP与原生APP的交互设计区别

深入了解浏览器存储:对比CookieLocalStoragesessionStorage与IndexedDB

原生app与WebApp的区别

Vue webapp项目通过HBulider打包原生APP

混合开发