[译] 理解 WebView

• 原文地址：Understanding WebViews
• 原文做者：kirupa
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：子非
• 校对者：swants, wuyanan

咱们一般使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文！虽然浏览器对于访问互联网内容的任务来讲很是流行，它们还有一些咱们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被咱们所熟知。这片文章将讲解 WebView 的神秘之处以及为何它这么棒。

咱们继续！

WebView 入门知识

让咱们来点无聊的定义。WebView 是一种嵌入式浏览器，原生应用能够用它来展现网络内容。这句话有两部分要注意：

1. 第一，原生应用（亦称 app）。原生应用由专门为特定平台设计的编程语言和 UI 框架编写：

换句话说，应用不是指在浏览器中运行的跨平台网络应用。相反，你的应用主要是用像 Swift、Objective-C、Java、C++、C# 语言来编写的。这种工做方式与系统更加贴近。在这样的背景下，你使用的大多数应用都应该是原生应用。许多流行的应用，好比你的台式机/笔记本上的 Microsoft Office 也是如此。

2. 第二个处须要注意的是嵌入式浏览器。咱们都知道浏览器是什么。它是让咱们能够在网上冲浪的独立应用：

若是你把浏览器想象成两部分，一部分是 UI（地址栏，导航栏按钮等），其它部分是把标记跟代码转换成咱们可见和可交互视图的引擎。

WebView 就是浏览器引擎部分，你能够像插入 iframe 同样将 Webview 插入到你的原生应用中，而且编程化的告诉它将会加载什么网页内容。

把全部的这些概念放到一块儿并简单整合下，WebView 只是一个可视化的组件/控件/微件等。这样咱们能够用它来做为咱们原生 app 的视觉部分。当你使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，你甚至用不到注意到它。

你的 WebView 就像是原生组件海洋里一座对 Web 友好的岛。对于你的应用来讲这座岛的内容不须要存储在本地。你的 WebView 一般会从 http:// 或者 https:// 地址下载网络内容。这意味着你能够从服务器中获取部分（或所有）Web 应用而且依赖 Webview 将这部份内容展现在原生应用中：

这种灵活性打开了一个浏览器端的 Web 应用和但愿展现在原生应用中的 Web 应用代码之间可重用的世界。这一切听起来真的很是棒……

运行在你的 WebView 中的 JavaScript 有能力调用原生的系统 API。这意味着你没必要受到 Web 代码一般必须遵照的传统浏览器安全沙箱的限制。下图解释了使这样成为可能的架构差别：

默认状况下，在 WebView 或 Web 浏览器中运行的任何 Web 代码都与应用的其他部分保持隔离。这样作是出于安全缘由，主要是为下降恶意的 JavaScript 代码对系统形成的伤害。若是浏览器或 WebView 出现故障，那很不幸，但能够接受。若是整个系统发生故障，那很不幸……而且这样不能接受。对于任意 Web 内容，这种安全级别颇有意义。你永远不能彻底信任加载的 Web 内容。WebView 的状况并不是如此。对于 WebView 方案，开发人员一般能够彻底控制加载的内容。恶意代码进入并在设备上形成混乱的可能性很是低。

这就是为何对于 WebView，开发人员可使用各类受支持的方式来覆盖默认的安全行为，并让 Web 代码和原生应用代码相互通讯。这种沟统统常称为 bridge。你能够在前面的图表中看到 bridge 可视化为 Native Bridge 和 JavaScript Bridge 的一部分。详细了解这些 bridge 的内容超出了本文的范围，但要点以下：为 Web 编写的相同 JavaScript 不只能够在 WebView 中运行，还能够调用原生 API 并帮助你的应用更深刻地集成酷炫的系统级功能，如传感器，存储，日历/联系人等。

WebView 用例

如今咱们已经了解了 WebView 的概况以及他们所拥有的一些强大做用，让咱们退后一步，看看咱们一些在原生应用中受欢迎的 WebView 的用例状况。

App 内置浏览器

WebView 最多见的用途之一是显示连接的内容。在移动设备上启动浏览器，将用户从一个应用切换到另外一个应用以及但愿他们找到返回应用的操做尤为使人失望。WebView 经过在应用自己内彻底加载连接的内容来很好地解决这个问题。

看看下面的视频，了解当咱们点击 Twitter 或 Facebook 应用中的连接时会发生什么：

Twitter 和 Facebook 都没有在默认浏览器中加载连接的内容。他们使用 WebView 伪造应用内浏览器并将内容呈现为应用体验自己的一部分。Twitter 的应用内浏览器看起来很是简单，但 Facebook 则更进一步，作了一个看起来很棒的地址栏甚至还有一个漂亮的菜单：

选择 Twitter 和 Facebook 作例子是由于我安装了这两个应用，而且能够随时录制视频与你们分享。有许多应用经过依赖 WebView 做为应用内浏览器来以相似的方式打开连接。

广告

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

虽然原生广告确实存在，但大多数原生解决方案在幕后使用 WebView，并从集中式广告服务器提供相似于你在浏览器中看到的广告。

全屏混合应用

到目前为止，咱们一直在将 WebView 视为舞台上的次要支持角色，并由原生应用和其余原生 UI 元素彻底支配。WebView 具备成为明星的深度和广度，而且在一大类应用中 WebView 内部加载的 Web 内容构成了整个应用用户体验：

这些应用被称为混合应用。从技术角度来看，这些仍然是原生应用。事实上，这些应用所作的惟一原生操做就是托管 WebView，而 WebView 又加载 Web 内容和用户交互的全部 UI。混合应用很受欢迎有几个缘由。最大的一个是开发人员生产力。若是你有一个在浏览器中运行的响应式 Web 应用，那么在各类设备上使用相同的应用做为混合应用会很是简单：

当你对 Web 应用进行更新时，全部使用它的设备均可以当即使用该更改，由于内容来自一个集中位置，也就是你的服务器：

若是你必须使用纯原生应用，不只须要为构建应用的每一个平台更新项目，你可能必须经历耗时的应用审核过程才能使你的更新在全部的应用商店获取到。从部署和更新的角度来看，混合应用很是方便。将这种便利性与原生设备访问相结合能为你的 Web 应用提供超能力，这样你就拥有了一个成功的技术解决方案。WebView 使一切成为可能。

原生应用扩展

你将看到 WebView 使用的最后一个大类与可扩展性有关。许多原生应用（尤为是桌面应用）为你提供了一种经过安装加载项或扩展程序来扩展其功能的方法。因为 Web 技术的简单性和强大，这些加载项和扩展一般以 HTML、CSS 和 JavaScript 而不是 C++，C# 或其余方式构建。一个流行的例子是 Microsoft Office。构成 Microsoft Office 的各类应用尽量是原生和经典的方式，可是为其构建扩展的方法之一就涉及 Web 技术。例如，一个流行的此类扩展是维基百科应用：

这些基于 Web 的扩展程序（如维基百科）在 Word 等 Office 应用中的表现方式是经过——是的，WebView：

WebView 中显示的实际内容来自此URL。当你在浏览器中访问该页面时，你并无真正看到不少内容。是原生应用功能和 Web 代码（经过 WebView 暴露）的功能之间的交集使体验工做完整。做为 Word 应用内维基百科扩展的用户，你可能永远不会有疑问幕后发生了什么，由于功能已经被很好地集成，咱们要的仅仅是它能正常工做。

WebView（一般）并不特别

WebView 很是棒。虽然看起来它们看起来像是彻底特殊和独特的野兽，记住，它们只不过是一个在应用中设置好位置和大小的浏览器，并且不会放置任何花哨的 UI。其实还有更多东西，但这是它的精髓。在大多数状况下，除非你要调用原生 API，不然没必要在 WebView 中专门测试 Web 应用。除此之外，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤为是使用同一渲染引擎时：

1. 在 iOS 上，Web 渲染引擎始终是 WebKit，与 Safari 和 Chrome 相同。是的，你没看错。iOS 上的 Chrome 实际上使用了 WebKit。
2. 在 Android 上的渲染引擎一般是 Blink，与 Chrome 相同。
3. 在 Windows，Linux 和 macOS 上，因为这些是更宽松的桌面平台，所以在选择 WebView 风格和渲染引擎时会有很大的灵活性。你看到的流行渲染引擎将是 Blink（Chrome）和 Trident（Internet Explorer），可是没有一个引擎能够依赖。这彻底取决于应用以及它正在使用的 WebView 引擎。

咱们能够花更多的时间来了解 WebView，并更深刻地了解它们提供的一些特殊行为，但这会让咱们偏离主题。对于咱们在本篇文章要讲的东西，不偏离主题并宽泛了解WebView 才是正确的——至少到目前为止。

若是你对此主题或任何其余主题有疑问，最简单的方法是经过咱们的论坛，这里有一群最友好的人等着你的到来，而且会乐于帮助你解决问题！

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。