初识WebView

本文目录 1.什么是WebView 2.WebView应用场景 2.1 App 内置浏览器 2.2 广告 2.3 全屏混合应用 2.4 原生应用扩展 3.WebView的优势 1.什么是WebView 我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读这篇文章，虽然浏览器对于访问互联网内容的任务来说非常流行，它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。 WebView 是一种嵌入式浏览器，原生应用可以用它来展示网络内容。这句话有两部分要注意： 第一，原生应用（亦称 app）。原生应用由专门为特定平台设计的编程语言和 UI 框架编写： 第二，需要注意的是嵌入式浏览器。我们都知道浏览器是什么。它是让我们可以在网上冲浪的独立应用，如果你把浏览器想象成两部分，一部分是 UI（地址栏，导航栏按钮等），其它部分是把标记跟代码转换成我们可见和可交互视图的引擎。 把所有的这些概念放到一起并简单整合下，WebView 只是一个可视化的组件/控件/微件等。这样我们可以用它来作为我们原生 app 的视觉部分。当你使用原生应用时，WebView 可能只是被隐藏在普通的原生 UI 元素中，你甚至注意不到它。 WebView 就像是原生组件海洋里一座对 Web 友好的岛。对于你的应用来说这座岛的内容不需要存储在本地。WebView 通常会从 http:// 或者 https:// 地址下载网络内容。这意味着你可以从服务器中获取部分（或全部）Web 应用并且依赖 Webview 将这部分内容展示在原生应用中。 运行在WebView 中的 JavaScript 有能力调用原生的系统 API。这意味着你不必受到 Web 代码通常必须遵守的传统浏览器安全沙箱的限制。下图解释了使这样成为可能的架构差异： 示意图.jpg Native Bridge 和 JavaScript Bridge让为 Web 编写的相同 JavaScript 不仅可以在 WebView 中运行，还可以调用原生 API 并帮助你的应用更深入地集成酷炫的系统级功能，如传感器，存储，日历/联系人等。 2.WebView应用场景 2.1 App 内置浏览器 WebView 最常见的用途之一是显示链接的内容。在移动设备上启动浏览器，将用户从一个应用切换到另一个应用以及返回之前操作的应用非常的复杂。而WebView 通过在应用本身内完全加载链接的内容来很好地解决这个问题。 2.2 广告 广告仍然是原生应用最流行的赚钱方式之一。这些广告大部分是如何投放的？答案是通过 WebView 提供的 Web 内容。 虽然原生广告确实存在，但大多数原生解决方案在幕后使用 WebView，并从集中式广告服务器提供类似于你在浏览器中看到的广告。 2.3 全屏混合应用 WebView并不是只能扮演次要角色并由原生应用和其他原生 UI 元素完全支配。WebView 具有成为主角的深度和广度，在一些场景中，WebView 内部加载的 Web 内容可以构成整个应用用户体验。 这些应用被称为混合应用。从技术角度来看，这些仍然是原生应用。事实上，这些应用所做的唯一原生操作就是托管 WebView，而 WebView 又加载 Web 内容和用户交互的所有 UI。混合应用很受欢迎有几个原因。最大的一个是解放了开发人员生产力。如果你有一个在浏览器中运行的响应式 Web 应用，那么在各种设备上使用相同的应用作为混合应用会非常简单。 当你对 Web 应用进行更新时，所有使用它的设备都可以立即使用该更改，因为内容来自一个集中位置，也就是你的服务器。 如果你必须使用纯原生应用，不仅需要为构建应用的每个平台更新项目，你可能必须经历耗时的应用审核过程才能使你的更新在所有的应用商店获取到。从部署和更新的角度来看，混合应用非常方便。将这种便利性与原生设备访问相结合能为你的 Web 应用提供超能力，这样你就拥有了一个成功的技术解决方案。WebView 使一切成为可能。 2.4 原生应用扩展 许多原生应用（尤其是桌面应用）为你提供了一种通过安装加载项或扩展程序来扩展其功能的方法。由于 Web 技术的简单性和强大，这些加载项和扩展通常以 HTML、CSS 和 JavaScript 而不是 C++，C# 或其他方式构建。一个流行的例子是 Microsoft Office。构成 Microsoft Office 的各种应用尽可能是原生和经典的方式，但是为其构建扩展的方法之一就涉及 Web 技术。 当用户打开一个应用，我们所看到的所有内容很有是由原生应用功能和 Web 代码（通过 WebView 暴露）共同实现的，并且用户可能永远不会有有疑问幕后发生了什么，因为功能已经被很好地集成，用户要的仅仅是可以正常浏览和使用应用。 3.WebView的优势 WebView 看上去功能非常的强大，非常的棒，但它们只不过是一个在应用中设置好位置和大小的浏览器，而且没有任何花哨的UI，这种简单性也正是它的精髓。在大多数情况下，除非你要调用原生 API，否则不必在 WebView 中专门测试 Web 应用。正常情况下，你在 WebView 中看到的内容与你在浏览器中看到的内容相同，尤其是使用同一渲染引擎时： 在 iOS 上，Web 渲染引擎始终是 WebKit，与 Safari 和 Chrome 相同。是的，你没看错。iOS 上的 Chrome 实际上使用了 WebKit。 在 Android 上的渲染引擎通常是 Blink，与 Chrome 相同。 在 Windows，Linux 和 macOS 上，由于这些是更宽松的桌面平台，因此在选择 WebView 风格和渲染引擎时会有很大的灵活性。你看到的流行渲染引擎将是 Blink（Chrome）和 Trident（Internet Explorer），具体使用完全取决于应用以及它正在使用的 WebView 引擎。 关于WebView的知识当然不仅于此，本文主旨是对WebView进行一个简单的介绍。

本文章由javascript技术分享原创和收集