WebApp 介绍

WebApp介绍

1. 什么是WebApp

在早期功能机时代，根本不存在什么手机应用的概念。基本上就是你买一个手机，这个手机上面有什么功能，你就用什么功能。

后面慢慢的新款诺基亚手机，提出了扩展手机应用的概念，除了出厂时手机里面内置的功能以外，用户还可以通过网络下载其他的手机应用。

不过那个时期大多以游戏为主，数量也非常的有限，并且还是按照机型进行区分，一部分机型可以安装某个应用，一部分机型不可以安装。

后来，智能手机时代来临，IOS 和 Andriod 两大阵营各自占领了半壁江山，手机也演变成了以应用（Application）为主的形态，包括之前大家所熟悉的“电话”、“短信”、“电话簿”等功能，在智能手机中都是以应用的形式存在。

刚开始的时候智能手机的应用倒也不多，但是智能手机非常机智的提供了一个叫应用市场的平台，允许第三方开发者开发手机应用发布到应用市场上面。

这就带来了一个良好的循环。因为应用市场上有琳琅满目的应用，所以用户愿意用，渐渐用户越来越多；因为用户越来越多，就会让更多的开发者加入进来，为 IOS 和 Andriod 系统开发手机应用，从而使得应用越来越多。

早期要开发手机应用，需要根据不同的手机系统使用不同的技术来开发。

例如如果是开发 IOS 应用，早期是使用 Objective-c，后来苹果推出了自家的 Swift 语言，成为了开发 IOS 应用的标准语言。

而如果是开发 Andriod 应用，早期是使用 Java 来进行开发，后面 JetBrains 推出了 Kotlin，被称之为 Android 世界的 Swift。

使用这些技术所开发的手机应用，我们称之为原生应用（Native App）。

无论从性能和体验上来讲，都是最好的，唯一的缺点就是成本比较高，因为现在 IOS 和 Andriod 的使用人群都很多，导致一个公司如果想要推出一个产品，需要找两拨人开发两份。

后面随着智能机时代的来临，使用手机浏览器浏览网页的体验才逐步上升。伴随着 HTML5、CSS3 的推出，SPA（Single Page Application）开发模式的流行，4G 通信技术的出现，一个网站给用户带来的用户体验越来越好，让人愈发的感觉像是在使用一个手机应用，而非是一个网站。

因此现在所说的 WebApp，总结起来就是移动端的网站或 H5 应用，说白了就是特定运行在移动端浏览器上的网站应用。

因为 SPA 开发模式的出现，整个网页只有一个页面，所以给人的感觉像是一个应用一样，从而出现了 WebApp 的说法。另外由于现在开发一个 Web 网站一般都使用 HTML5、CSS3 等新的技术，因此 WebApp 又被称之为 H5 应用。

2. WebApp相较于原生应用的优缺点

优点：

• 开发成本低，可以跨平台，调试方便，开发速度最快： WebApp 一般只需要一个前端人员开发出一套代码，然后即可应用于各大主流浏览器（特殊情况可以代码进行下兼容），没有新的学习成本，而且可以直接在浏览器中调试。
• 维护成本低：同上，如果代码合理，只需要一名前端就可以维护多个WebApp。
• 更新最为快速：由于 WebApp 资源是直接部署在服务器端的，所以只需要替换服务器端的文件，用户访问是就已经更新了（当然需要解决一些缓存问题）。
• 无需安装 App，不会占用手机内存：通过浏览器即可访问，无需安装，用户就会比较愿意去用。

缺点：

• 性能低，用户体验差： 由于是直接通过的浏览器访问，所以无法使用原生的 API，操作体验不好。
• 依赖于网络，页面访问速度慢，耗费流量：WebApp 每次访问都需要去服务端加载资源访问，所以必须依赖于网络，而且网速慢时访问速度很不理想，特别是在移动端，如果网站优化不好会无故消耗大量流量。
• 功能受限，大量功能无法实现：只能使用 HTML5 的一些特殊 API，无法调用原生 API，所以很多功能存在无法实现情况。
• 临时性入口，用户留存率低： 这既是它的优点，也是缺点，优点是无需安装，缺点是用完后有时候很难再找到，或者说很难专门为某个 WebApp 留存一个入口，导致用户很难再次使用。

3. 开发 WebApp 需要哪些技术

基础语言：HTML、CSS、JS 单页应用框架：Angular、React、Vue

对比PC端开发区别：

列1	系统	浏览器	分辨率（尺寸）
PC	Windows/Mac（区别不大）	区别很大	有区别
移动端	ios/Android/Windows（有区别）	区别很大	区别很大

所以开发WebApp的时候，主要要解决一下几方面的问题:

• 适配
• 响应式
• H5 调用原生接口
• 兼容性

WebView介绍

1. 什么是webView

WebView 是一种嵌入式浏览器，原生应用可以用它来展示网络内容。

我们都知道浏览器是什么，它是让我们可以浏览网页的独立应用。而如果你把浏览器想象成两部分，那么一部分是 UI（地址栏，导航栏按钮等），其它部分是把标记跟代码转换成我们可见和可交互视图的浏览器引擎。

WebView 就是浏览器引擎部分，你可以像插入 iframe 一样将 Webview 插入到你的原生应用中，并且编程化的告诉它将会加载什么网页内容。这样我们可以用它来作为我们原生 app 的视觉部分。当你使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，你甚至用不到注意到它。

运行在你的 WebView 中的 JavaScript 有能力调用原生的系统 API。这意味着你不必受到 Web 代码通常必须遵守的传统浏览器安全沙箱的限制。

下图解释了使这样成为可能的架构差异：

Web 代码和原生应用代码相互通信。这种沟通通常称为 bridge。

通过上图我们可以看到 bridge 可视化为 Native Bridge 和 JavaScript Bridge 的一部分。正因为 bridge 的存在，我们所编写的 JavaScript 不仅可以在 WebView 中运行，还可以调用原生 API 帮助我们的应用更深入地集成酷炫的系统级功能，如传感器，存储，日历/联系人等。

2. WebView 常见使用场景

2.1 App 内置浏览器

WebView 最常见的用途之一是显示链接的内容。

在移动设备上启动浏览器，将用户从一个应用切换到另一个应用，操作完成后再返回原本的应用，这样的操作体验相当的糟糕。WebView 通过在应用本身内完全加载链接的内容来很好地解决这个问题。

这也解释了为什么上面提到的抖音、微信、支付宝都可以打开那个页面。

2.2 广告

广告仍然是原生应用最流行的赚钱方式之一。这些广告大部分是如何投放的？答案是通过 WebView 提供的 Web 内容：

2.3 混合开发（Hybrid App）

到目前为止，一直在将 WebView 视为舞台上的次要支持角色，并由原生应用和其他原生 UI 元素完全支配。

但是近年来出现了一种新的开发模式，叫做混合开发（Hybrid App）。这种开发模式介于 WebApp 和 NativeApp 这两者之间的 App 开发技术，兼具“Native App 良好交互体验的优势”和“WebApp 跨平台开发的优势”。其原理就是原生客户端的壳 WebView，里面是 HTML5 的网页。

混合应用很受欢迎有如下的原因：

• 开发成本较低，可以跨平台，调试方便： Hybrid 模式下，由原生提供统一的 API 给 JS 调用，实际的主要逻辑由 HTML 和 JS 来完成，而由于最终是放在 WebView 中显示的，所以只需要写一套代码即可，达到跨平台效果，另外也可以直接在浏览器中调试，很为方便。最重要的是只需要一个前端人员稍微学习下 JS API 的调用即可，无需两个独立的原生人员。一般 Hybrid 中的跨平台最少可以跨三个平台：Android、iOS 和普通 Webkit 浏览器

• 维护成本低，功能可复用：同上，如果代码合理，只需要一名前端就可以维护多个 app，而且很多功能还可以互相复用。

• 更新较为自由：虽然没有 WebApp 更新那么快速，但是 Hybrid 中也可以通过原生提供 api 进行资源主动下载，达到只更新资源文件，不更新 apk(ipa) 的效果。

现在国内外也有很多将 WebApp 打包成 Hybrid App 的应用技术，例如：

Cordova

DCloud

API Cloud

2.4 桌面应用扩展

WebView 的使用场景不仅仅只是在移动端应用上面，许多桌面应用也可以使用 WebView 来扩展自己的功能。由于 Web 技术的简单性和强大性，很多加载和扩展项通常选择以 HTML、CSS 和 JavaScript 技术而非 C++、C# 来进行构建。

总结

目前为止，我们就已经介绍了 3 种移动端开发的方式了。这里我们以表格的形式做一个总结：

	Native App	Web App	Hybrid App
原生功能体验	优秀	一般	良好
渲染性能	非常快	一般	良好
是否支持设备底层访问	支持	不支持	支持
网络要求	支持离线	依赖网络	支持离线(资源存本地情况)
更新复杂度	高(几乎总是通过应用商店更新)	低(服务器端直接更新)	较低(可以进行资源包更新)
编程语言	Android(Java) iOS(OC/Swift)	js+html+css3	js+html+css3
社区资源	丰富(Android、iOS 单独学习)	丰富(大量前端资源)	有局限(不同的 Hybrid 相互独立)
上手难度	难(不同平台需要单独学习)	简单(写一次，支持不同平台访问)	简单(写一次，运行任何平台)
开发周期	长	短	较短
开发成本	昂贵	便宜	较为便宜
跨平台	不跨平台	所有浏览器	可以打包到不同的平台
APP 发布	App Store	Web 服务器	App Store

·