作者：子非
转发链接：https://juejin.im/post/5ce76ee4f265da1b8d15f700
前言
我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文！虽然浏览器对于访问互联网内容的任务来说非常流行，它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。
我们继续！
WebView 入门知识
让我们来点无聊的定义。WebView 是一种嵌入式浏览器，原生应用可以用它来展示网络内容。这句话有两部分要注意：
- 第一，原生应用(亦称 app)。原生应用由专门为特定平台设计的编程语言和 UI 框架编写：
换句话说，应用不是指在浏览器中运行的跨平台网络应用。相反，你的应用主要是用像 Swift、Objective-C、Java、C++、C# 语言来编写的。这种工作方式与系统更加贴近。在这样的背景下，你使用的大多数应用都应该是原生应用。许多流行的应用，比如你的台式机/笔记本上的 Microsoft Office 也是如此。
- 第二个处需要注意的是嵌入式浏览器。我们都知道浏览器是什么。它是让我们可以在网上冲浪的独立应用：
如果你把浏览器想象成两部分，一部分是 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 中看到的内容与你在浏览器中看到的内容相同，尤其是使用同一渲染引擎时：
- 在 iOS 上，Web 渲染引擎始终是 WebKit，与 Safari 和 Chrome 相同。是的，你没看错。iOS 上的 Chrome 实际上使用了 WebKit。
- 在 Android 上的渲染引擎通常是 Blink，与 Chrome 相同。
- 在 Windows，Linux 和 macOS 上，由于这些是更宽松的桌面平台，因此在选择 WebView 风格和渲染引擎时会有很大的灵活性。你看到的流行渲染引擎将是 Blink(Chrome)和 Trident(Internet Explorer)，但是没有一个引擎可以依赖。这完全取决于应用以及它正在使用的 WebView 引擎。
我们可以花更多的时间来了解 WebView，并更深入地了解它们提供的一些特殊行为，但这会让我们偏离主题。对于我们在本篇文章要讲的东西，不偏离主题并宽泛了解WebView 才是正确的——至少到目前为止。
如果你对此主题或任何其他主题有疑问，最简单的方法是通过我们的论坛，这里有一群最友好的人等着你的到来，并且会乐于帮助你解决问题！
推荐JavaScript经典实例学习资料文章
《细聊应用场景再谈防抖和节流「进阶篇」》
《前端埋点统一接入方案实践》
《细聊微内核架构在前端的应用「干货」》
《一种高性能的Tree组件实现方案「干货」》
《进击的JAMStack》
《前后端全部用 JS 开发是什么体验(Hybrid + Egg.js经验分享)上》
《前后端全部用 JS 开发是什么体验(Hybrid + Egg.js经验分享)中》
《前后端全部用 JS 开发是什么体验(Hybrid + Egg.js经验分享)下》
《一文带你搞懂 babel-plugin-import 插件(上)「源码解析」》
《一文带你搞懂 babel-plugin-import 插件(下)「源码解析」》
《JavaScript常用API合集汇总「值得收藏」》
《推荐10个常用的图片处理小帮手(上)「值得收藏」》
《推荐10个常用的图片处理小帮手(下)「值得收藏」》
《JavaScript 中ES6代理的实际用例》
《12 个实用的前端开发技巧总结》
《一文带你搞懂搭建企业级的 npm 私有仓库》
《教你如何使用内联框架元素 IFrames 的沙箱属性提高安全性？》
《细说前端开发UI公共组件的新认识「实践」》
《细说DOM API中append和appendChild的三个不同点》
《细品淘系大佬讲前端新人如何上王者「干货」》
《一文带你彻底解决背景跟随弹窗滚动问题「干货」》
《推荐常用的5款代码比较工具「值得收藏」》
《Node.js实现将文字与图片合成技巧》
《爱奇艺云剪辑Web端的技术实现》
《我再也不敢说我会写前端 Button组件「实践」》
《NodeX Component - 滴滴集团 Node.js 生态组件体系「实践」》
《Node Buffers 完整指南》
《推荐18个webpack精美插件「干货」》
《前端开发需要了解常用7种JavaScript设计模式》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的 Webpack HMR 学习指南(上)「含源码讲解」》
《了不起的 Webpack HMR 学习指南(下)「含源码讲解」》
《10个打开了我新世界大门的 WebAPI(上)「实践」》
《10个打开了我新世界大门的 WebAPI(中)「实践」》
《10个打开了我新世界大门的 WebAPI(下)「实践」》
《「图文」ESLint 在中大型团队的应用实践》
《Deno是代码的浏览器，你认同吗？》
《前端存储除了 localStorage 还有啥？》
《Javascript 多线程编程的前世今生》
《微前端方案 qiankun(实践及总结)》
《「图文」V8 垃圾回收原来这么简单？》
《Webpack 5模块联邦引发微前端的革命？》
《基于 Web 端的人脸识别身份验证「实践」》
《「前端进阶」高性能渲染十万条数据(时间分片)》
《「前端进阶」高性能渲染十万条数据(虚拟列表)》
《图解 Promise 实现原理(一)：基础实现》
《图解 Promise 实现原理(二)：Promise 链式调用》
《图解 Promise 实现原理(三)：Promise 原型方法实现》
《图解 Promise 实现原理(四)：Promise 静态方法实现》
《实践教你从零构建前端 Lint 工作流「干货」》
《高性能多级多选级联组件开发「JS篇」》
《深入浅出讲解Node.js CLI 工具最佳实战》
《延迟加载图像以提高Web网站性能的五种方法「实践」》
《比较 JavaScript 对象的四种方式「实践」》
《使用Service Worker让你的 Web 应用如虎添翼(上)「干货」》
《使用Service Worker让你的 Web 应用如虎添翼(中)「干货」》
《使用Service Worker让你的 Web 应用如虎添翼(下)「干货」》
《前端如何一次性处理10万条数据「进阶篇」》
《推荐三款正则可视化工具「JS篇」》
《如何让用户选择是否离开当前页面？「JS篇」》
《JavaScript开发人员更喜欢Deno的五大原因》
《仅用18行JavaScript实现一个倒数计时器》
《图文细说JavaScript 的运行机制》
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(一)「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(二)「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(三)「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(四)「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(五)「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜(六)「值得收藏」》
《深入JavaScript教你内存泄漏如何防范》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web 前端区别在哪里》
《63个JavaScript 正则大礼包「值得收藏」》
《提高你的 JavaScript 技能10 个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线 PDF 预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《纯JS手写轮播图(代码逻辑清晰，通俗易懂)》
《JavaScript 20 年 中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的 5 个区别》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location 详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node + H5 实现大文件分片上传、断点续传》
《一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的 JavaScript 模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript 面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道 JavaScript知识点汇总(一)》
《关于前端174道 JavaScript知识点汇总(二)》
《关于前端174道 JavaScript知识点汇总(三)》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript 装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结(上)【实践】》
《70个JavaScript知识点详细总结(下)【实践】》
《开源了一个 JavaScript 版敏感词过滤库》
《送你 43 道 JavaScript 面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂 JavaScript 执行机制》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript 工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的 JS 写得更漂亮》
《恭喜你获得治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
《Jquery插件(常用的插件库)》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation 在 JS 中的应用「前端篇」》
作者：子非
转发链接：https://juejin.im/post/5ce76ee4f265da1b8d15f700
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
