WebApp与原生App介绍

原生App

在智能手机上允许的App应用程序有NativeApp（基于本地操作系统运行）和WebAPP（基于手机浏览器运行），其中Native App就是原生App的意思，所以原生App开发也就是指基于本地操作系统的App开发服务。如今市面上多数的App软件开发都是使用的原生程序编写的应用程序，也就是说大部分的手机App属于原生App应用软件。

原生App访问和兼容的能力比较好，可以支持在线或者离线消息推送或是进行本地资源访问，以及摄像、拨号、蓝牙、功能的调取。原生App开发有很多的优势，如原生App是针对不同的平台为用户提供不同的体验、原生应用可以节约宽带成本、访问本地资源、打开的速度更快并为用户提供最佳的用户体验和优质的用户界面等。

WebApp

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

原生App和Web App对比

1.开发方面

原生APP:每一种移动操作系统都需要独立的开发项目，iphone版本、Ipad版本、安卓版本。每种平台都需要独立的开发语言。Java（Android），Objective-C（iOS）等等。需要使用各自的软件开发包，开发工具以及各自的控件。开发成本高、开发速度慢、维护成本高。三个平台（IOS、安卓、windows）的规则、推广、运营都不相同。官方应用商城对APP上线审核流程比较复杂而且很慢，会严重影响APP的发布上线。

Web App：因为运行在移动设备的浏览器上，所以只需要一个开发项目。可以通过HTML、CSS或者JavaScript来进行Web App的开发。开发成本低、开发速度快。

2.功能方面

原生App：原生APP是一个系统性的应用程序，可以类比于电脑上的软件。原生app可以调用移动终端的硬件设备，比如：麦克风、摄像头、短信、GPS、蓝牙、重力感应等。实现功能丰富

Web App：Web APP可以类比于电脑上的网页。Web APP更多是页面展示类的APP。只能使用有限的移动硬件设备功能。更多用于页面展示，侧重于简单的交互，无法使用很多硬件设备独特的功能。

3.应用安装使用方面

原生App：需要通过应用商店将原生app下载到手机上或移动终端上。以独立的应用程序运行。用户必须手动去下载安装这些原生App，原生应用可以节约宽带成本，可以访问本地资源、缓存。

Web App：通过移动设备上的浏览器访问，软件更新只需要更新服务器就够了，用户层面不需要做任何操作。不需要安装客户端，可以节省手机终端的内存空间。

4.版本控制方面

原生App：用户可以自有地选择是否更新软件版本，所以会出现不同用户同时使用不同版本的情况。同时也会导致维护成本比较高。使用旧版本的用户无法体验新版本的完成功能。

Web App：所有的用户都是用同样的版本，所有用户获得的功能都是相同的。版本更新比较方便，直接在服务器侧更新数据即可。一个功能做好了就能上线，一天更新几十次都毫无压力。如果客户端只是哥浏览器，那一切都会变得很简单。另外web统一性高，跨平台使用时开发量少。由于其入口不明显（浏览器导航或者随意点击链接进入），让用户记住的门槛也随之拔高，每次推广导入的流量都可能沦为一次性努力，用户留存率低。

5.加载速度方面

原生App：原生APP由“云服务器数据+APP应用客户端”两部分构成，APP应用所有的UI元素、数据内容、逻辑架构安装在手机终端上。访问的时候，不需要重新下载加载应用页面架构，只需要加载数据即可。所以加载速度更快，页面响应更快。

Web App：而Web APP打开一个页面，都需要重新加载页面的所有元素，访问速度受手机终端性能和网络环境的限制，导致加载速度慢，而且操作频繁容易卡死。

 

WebView概述

Android WebView在Android平台是一个特殊的View，它能用来显示网页，这个WebView类可以被用来在app中仅仅显示一张在线的网页，当然还可以用来开发浏览器。

WebView内部实现是采用渲染引擎(WebKit)来展示view的内容，提供网页前进后退、网页放大、缩小、搜索等功能。

WebView是一个基于WebKit引擎、展现Web页面的控件，Android的WebView在低版本和高版本采用了不同的WebKit版本内核。

简单的说就是这个组件可以使软件中显示在线网页，如果组件丢失或失效，软件就无法在其界面中显示在线网页所以导致了闪退。

WebView基本使用

//WebView显示外部网页
webview.loadUrl('http://slashdot.org');
//WebView加载本地资源
webview.loadUrl('file:///android_asset/test.html');
//WebView显示html语句
String summary="You scored192points.";
webview.loadData(summary,'text/html',null);

WebView使用场景

常用在一些交互比较少，变化比较快的场景：电商活动页面。

它是ui专门设计（和操作系统风格无关）

H5页面和Native进行交互

混合开发的App(Hybrid App)就是一个在App中内嵌一个轻量级的浏览器，一部分原生的功能改为H5来开发，这部分功能不仅能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时允许，让用户的体验更好又可以节省开发的资源

当一个H5页面上有一个按钮或链接，我能不能够跳转到Native App的某个页面；比如我点了H5页面上的分享按钮，我能不能调用Native App的分享功能；比如在页面正在加载的时候能不能获取Navtive App的用户信息等等。

一般来讲，我所知道的两种主流的方式就是

1. js调用Native中的代码
2. Schema:WebView拦截页面调跳转

第二种方法实现起来很简单，但是一个致命的问题就是这种交互方式是单向的，H5无法实现回调。如果需要变得复杂，假如H5需要获取Native App中的用户信息，那么最好使用js调用的方式。例如：我们通过淘宝客户端进入天猫的h5页面购物，在这种情况下，我们就需要webview页面获取登录用户的信息