什么是WebView？

原文地址（英文，需开启翻译）
http://developer.telerik.com/featured/what-is-a-webview/

---

---

什么是WebView？

每个混合移动应用开发人员都有这个时刻。你知道我在说什么，有人问你，“那么你开发什么样的移动应用程序？”根据上下文，一个后续的问题可能是，“那么你本来是在开发这些应用程序？意思是使用Swift，Objective-C和Java等母语。勇敢地，你可能会回应，“不，我的应用程序都是混合移动“…并准备好空白的盯着。深呼吸一下，您就会发现有关混合移动应用程序是什么，以及它如何在WebView中呈现其内容的解释。现在为母亲准备所有问题：“那是什么？

露西
“把这个！- 图像源

这篇文章是我下次尝试开发架构的讨论时，试图为您节省一些手拧紧的时刻。我们来解决这个问题，“什么是WebView？”。我们将首先定义WebViews是什么，为什么我们关心它们，如何让开发人员使用Web技术构建移动应用程序，然后查看WebViews的类型。

网页视图。为甚么我们呢

老实说，这似乎是奇怪的 - 这个想法，我们使用网络技术构建一个移动应用程序，并将整个事情呈现在WebView中。感觉有点像将整个网站砸成一个iframe。

网页视图

但奇怪的关键是，开发人员可以重用他们所熟悉和喜欢的网络技术来开发移动应用。这有利于代码重用 - 写一次的理念，在任何地方运行。

您使用网络技术构建，通过像Cordova这样的工具为本地技术添加桥梁，就像这样，您可以使用适合应用程序市场的移动应用程序！事实上，WebViews甚至可以使用像Electron这样的工具来驱动桌面应用程序。

看起来很简单 一个迷你网络浏览器（例如WebView）运行您的应用程序，但您可以使用本机API。

如果您有网络技能，但想要达到一个平台，您几乎没有经验 - iOS，Android，Windows，OS X或Linux - 使用WebView通常是一个引人注目的选项。它不一定要缓慢而笨拙！完善的，混合移动应用程序通常可以表现得很好。Untappd应用程序是精心构建的混合移动应用程序的一个很好的例子。

untappd

Untappd是混合移动应用的一个很好的例子，它使用插件来增强其流畅的原生感。

WebView的解剖学

在他关于混合移动应用程序的文章中，John Bristowe将WebView定义为“无框浏览器窗口，通常配置为全屏运行”。基本架构可以在本图表中了解，比较本机，混合和网络应用程序：

混合本机web
由myShadesOfGray提供

WEBVIEW，WEBVIEW，UIWEBVIEW，WKWEBVIEW，WTFVIEW？

本质上是提供网页内容的最小浏览器有很多不同的名称。在本文中，我将使用术语WebView来覆盖上面引用的无色浏览器窗口。有几种不同类型的WebView可用于不同的平台，我在下面讨论。

如果WebView的浏览器不仅仅是一个iframe或者一个选项卡，移动应用程序如何利用这些功能来支持本机功能，例如使用设备的相机拍摄照片？

通过查看利用WebViews来呈现内容的框架，可以回答这个问题。最着名的框架Apache Cordova将HTML5代码嵌入到WebView中，然后提供“ 外部函数接口 ”（FFI）或“本机桥”来访问设备上的本机资源。因此，使用诸如Kendo UI Mobile的Cordova友好框架的开发人员可以编写几行代码，以跨平台友好的方式利用本地摄像机：

function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
如果您要按一下按钮来调用此方法，相机将在iOS或Android设备上打开，这取决于框架如何形成用户交互的WebView之间的桥梁，以及FFI桥本身，允许代码由本地系统解释。

有趣的事实：科尔多瓦被描述为从一个能够在IOS上嵌入WebView的外部功能界面的黑客演变而来。

尽管根据定义，所有混合移动应用程序框架都依赖于应用程序呈现层的WebViews的标准实现，但是根据我们选择使用的框架，WebView可用的类型有很多不同。我们来看看其中的一些。

速度的需要

使用本地API以上技术构建移动应用程序不可避免地会涉及到一些牺牲性能。一个聪明的开发人员通常可以最大限度地降低这种性能，但是框架要承诺更多。

例如，Trigger.io拥有一个超级快速的本机桥（“比PhoneGap！快5倍”）。Cocoon.js越走越远，提供更快的体验基础上均使用帆布+（允许使用的WebView在所有的回避）和的WebView +，更快的实现原生的WebView的。

Cocoon.js的制造商Ludei对本机WebView的使用感到遗憾：

系统webview是由操作系统提供的能够加载Web内容的本地组件。网页浏览是桌面和移动操作系统提供的一个很棒的工具，但他们有一些问题。

具体来说，Ludei说，问题是表现和分裂 - 所以他们决定自己滚动。

作为本机元素，WebView与本地操作系统相关联，因此维护一个可以利用硬件速度提升以及WebView技术进步的性能生态系统，同时考虑到旧设备和分散式生态系统的限制（I’看着你，Android）是一个很大的挑战。

随着移动设备生态系统的发展，WebView也是如此。我们来看看WebView在过去几年中的变化，基于它在不断变化的移动领域的使用。

WebViews的类型

为了本文的目的，在讨论桌面WebView的勇敢的新世界之前，我想集中讨论iOS和Android WebView的有趣历史，这些历史在最近发展很久。

IOS WEBVIEWS：UIWEBVIEW和WKWEBVIEW

由于苹果公司决定不在Safari的移动浏览器中运行移动应用程序，所以使用 UIWebView。这对iOS上的混合移动应用程序有深远的影响。

正如Mattt Thompson 所说：

UIWebView是巨大的，笨重的和泄漏的内存。它落后于移动Safari，它具有Nitro JavaScript引擎的优势。

缺乏更快捷的JavaScript引擎有助于刺激在这种环境中运行的应用程序的感觉，因为它们的干扰，滞后和慢于本地用户。

随着引进的iOS 8，但是，开发商庆祝到来的WKWebView。

WKWebView是iOS 8和OS X优胜美地推出的现代WebKit API的核心。它在AppKit中的UIKit和WebView中替换UIWebView，在两个平台之间提供一致的API。- NSHipster

随着几项性能增强，包括60fps滚动和内置手势支持，WKWebView包括与Safari相同的JavaScript引擎，相对于较慢的UIWebView而言，这是一个巨大的改进。

为什么不硝基？

尽管苹果公司似乎在蓄意打击UIWebView和其中运行的网络应用程序，John Gruber在2011年指出，苹果主要关心维护其系统上运行的应用程序的安全性。Nitro使用JIT（Just-In-Time）编译，但是由于“JIT需要将RAM中的内存页面标记为可执行文件”，因此作为安全措施，Apple不允许这样做。WKWebView利用改进的应用程序间通信API。WKWebView现在允许第三方插件在独立的沙盒进程中运行的JavaScript 之外的应用程序。该功能可以减轻Apple对使用JIT编译的第三方的安全性。

UIWebView和WKWebView组件的一个方便的比较表可以在这里查看WKWebView在UIWebView上的功能的增加。

用于Telerik策划的插件市场的iOS应用程序的WKWebView Cordova插件为您的iOS应用程序提供了一种方便的下载方式，可以在混合移动应用程序中始终使用WKWebView，无论用户与应用程序交互的设备如何。这个插件承诺解决向后兼容性问题，尽管有几个关于这个插件与其他插件的兼容性的注意事项。

ANDROID WEBVIEWS

在Android设备上，令人惊讶的是（运行Android操作系统的大量设备），情况比iOS更加分散。TJ VanToll 对Android的情况给出了很好的解释。

而早期版本的Android操作系统依赖于WebKit渲染引擎来为其WebView提供支持，从Android 4.4开始，将实现各种版本的Chromium。通常，随着Android操作系统的每次连续更新，还将包含一个新版本的Chromium，从而可以访问新的渲染引擎的功能。对于必须支持早期版本的Android的开发人员，这显然会导致向后兼容性问题。

为了解决这个特殊问题，从Android 5.0开始，引入了’自动更新’WebView的概念。Android 5.0 WebView是根据Android操作系统的更新周期而不是WebView版本和功能，而是Google Play中提供的“系统级.apk”，可以在后台进行更新。

View image on Twitter
View image on Twitter
Follow
TJ VanToll @tjvantoll
So cool to see the Android System WebView updating outside of an Android release.
10:36 PM - 12 Mar 2015
14 14 Retweets 12 12 likes
Twitter Ads info & Privacy
当然，访问自动更新WebView是Android用户采用Android 5.0的关键。还有待观察，这可能发生多快。

人行横道的特殊情况

像Android的自动更新系统一样，英特尔的十字路口项目旨在弥合旧设备之间的差距，使用旧的操作系统和笨重的WebView及其较新的设备。Crosswalk“使您能够使用自己的专用运行时部署Web应用程序”，因此您不依赖于第三方或依赖平台的WebView。相反，您在司机座位，并控制您的应用程序正在使用的WebView。

东京人行横道
十字架小心！图片由Candy Chang提供

Crosswalk项目本身与Blink，Chromium的渲染引擎相关联，其更新遵循Blink的发布周期。虽然它的使用对于Android 4.0及更高版本特别有用，但它也可以用于iOS，Linux桌面和Tizen。在Android上，Crosswalk使用Chromium，而在iOS上依赖于WKWebView，但跨平台开发人员可以放松，因为他们可以使用统一的API来支持大多数用例。Crosswalk的Cordova 插件使Chromium 45浏览器渲染引擎统一起来，快速实施到面向Android设备的混合移动项目中。

其他WEBVIEWS

到目前为止，我将WebViews的讨论限制在混合移动应用开发人员最感兴趣的位置。但是，WebViews无处不在！让我们快速浏览一些关于WebViews的工作，目的是取代旧的应用内浏览器，然后查看桌面上发生的情况。

其他移动WEBVIEWS

有时候，需要一个应用内浏览器选项，可以在移动应用中打开，而苹果和Google对于开发人员都有几个选择：

Safari View控制器
在iOS中，为了通过开发自定义迷你浏览器来运行应用程序内浏览器内容来阻止开发人员创建碎片，苹果公司在iOS9中引入了Safari View Controller，这是Safari的“沙盒式”版本。它为开发人员提供了一个标准化的环境，用于呈现内容，同时为用户提供一致的体验和几个方便的安全帮助者，允许用户登录View Controller并在访问移动相关站点时保持登录状态Safari通过共享Cookie和共享登录凭据。这些小吃大小的应用视图可为iOS用户提供一致的应用内深入体验。
视图控制器
Safari View控制器，图像由MacRumors提供

Chrome自定义选项卡
Safari视图控制器的Android对应物是Chrome自定义选项卡。它允许开发人员在Android开发人员指南的参数中创建自定义浏览器体验。它们适用于所有可在Android 4.1以上（Jellybean）上运行Chrome 45的设备。许多好处都包含在这个定制的WebView中，包括在后台“浏览器的”预热“，同时避免从应用程序中窃取资源，共享cookie和权限，然后一键返回到应用程序。此外，它允许Android开发人员以更快的速度向不在自动更新WebViews的设备上浏览的用户提供内容，而不是退回到旧版WebView上。
chrome自定义标签
Chrome自定义标签的示例。注意最小的浏览器chrome

桌面上的WEBVIEWS

您也可以在桌面上找到WebViews，您可能甚至不知道您正在使用WebView。松弛是其中之一的一个很好的例子。用户体验既快捷又完备：

松弛
生产力现象是松弛。图片由MetaLab提供

NW.js
在英特尔开源技术中心（感谢英特尔！）创建的一个有趣的项目是NW.js，以前称为Node-webkit，它是基于Chromium的应用程序运行时。它允许开发人员直接从DOM调用Node.js模块。桌面应用程序是使用这个库编写的，并且作为一个无条件的浏览器呈现，独立的，易于打包和分发的Node.js的所有火力。这个图书馆的一个很好的用例将是HTML5 桌面游戏。
电子
可能比NW.js更为人所知，Github的Electron是另一个帮助您构建桌面应用程序的框架。该项目原来称为Atom Shell，因为它是GitHub桌面Atom编辑器的基础。诸如Slack，Particle和Microsoft之类的公司已经使用Electron来构建优秀的桌面应用程序，如Visual Studio代码和Slack客户端。可以在这里找到关于 NW.js和Electron之间差异的很好的讨论
网页视图。知道他们，爱他们

我喜欢WebViews

图片由我爱露西维基提供

如果您在移动设备和/或桌面上展示网络内容，那么您需要拥抱WebView的疯狂和疯狂的世界。这是一个不断发展的世界，受到供应商真实和感知的安全要求以及硬件和软件的进步的影响。WebView正好位于开发人员工具包的中间，提供了一种以有效的方式在您的用户面前获取令人敬畏的应用内容的方法…假设知识渊博的前端开发人员对其怪癖非常了解。

Plus WebViews可以在任何一方提供至少半小时的稳固交谈。

感谢TJ VanToll和Cody Lindley对本文的宝贵意见！

标题图片由Mark Klotz提供