乐趣区

关于webkit:reactnative必备WebView篇

jiezi

什么是 WebView、WebView 倒退过程、WebView DevTools 怎么用？如何调试 WebView？

下文中可能会看到很多加粗的名词，或者会不了解，不要急，前面会缓缓介绍。

WebView 倒退

为了可跨平台开发一次能够部署 iOS、Android 等平台；公布更新快，且能在服务器端公布，还可能实时更新终端展现，便于疾速降级以及紧急修复 bug；排版简单的内容等等。WebView 诞生并开始逐步倒退起来。

IOS

从 IOS2 开始，UIWebView呈现了，开发者只需创立一个 UIWebView 对象，便可将其附加到窗口，而后向其发送加载 Web 内容的申请。还能够应用该类在网页历史中前后挪动，甚至能够通过编程形式设置一些网页内容属性。

但随着人们对挪动端的依赖，UIWebView 已逐步满足不了人们的须要。UIWebView 与 app 通信时只能通过 js 或者 UIWebViewDelegate 来进行，客户端想传给 UIWebView 网页参数或从中获取数据都比较复杂。

从 IOS8 之后，WKWebView呈现，UIWebView 缓缓不再被应用，IOS13 版本的时候，UIWebView 被列为了过期 API，2020 年 4 月起 App Store 将不再承受应用 UIWebView 的 app 上架，同年 12 月不再容许更新。

WKWebView是一个古代的反对最新Webkit 性能的网页浏览控件，它有极强的性能和以下几大长处：

  • 采纳跨过程计划
  • Nitro JS 解析器，60fps 的刷新率，性能和 safari 比肩，对 h5 实现了高度反对
  • 内存开销更小
  • 内置手势
  • 反对更多 h5 个性
  • 和 safari 应用雷同的 js 引擎 —JavaScriptCore
  • 提供罕用的属性，如加载网页进度的属性

自此之后 IOS 始终应用 WKWebView，每个版本都很稳固

Android

Android（4.4 KitKat 版本之前）应用的是 Webkit 作为其引擎，4.4 开始（API 级别 targetSdkVersion 19）引入了基于 Chromium 的新版 WebView，自此包含了 V8 JavaScript 引擎，并反对以前在旧 WebViews 中短少的古代 Web 规范。

新的 WebView 与安卓上的 Chrome for Android 有一样的引擎，因而 WebView 和安卓里的 Chrome 之间的渲染更加统一。

如果您的 targetSdkVersion 设置为“18”或更低版本，则 WebView 将在“怪异模式”下尽可能严密地运行，以防止上述某些行为变更，同时仍为利用提供性能和网络规范降级。

不过要留神的是，Android 4.4 基本不反对单列和窄列布局以及默认缩放级别，可能会存在未发现的其余行为差别，因而请务必在 Android 4.4 或更高版本上测试您的利用，即便 targetSdkVersion 设置为“18”或更低版本也是如此。

从产品角度来讲，Android 版 Chrome 与 WebView 是离开的。它们都基于 Chromium，然而仍有局部性能 WebView 依然应用不了，比方 Form validation、Fullscreen API 等等。

如果你想查看本人的 Android System WebView 版本，能够关上开发者模式，在开发者选项里看到 WebView implementation，这些版本 ID 与 Android 版 Google Chrome 的版本 ID 雷同

从 Android 7（API 级别 24）开始，WebView 在 Google Play 商店中作为独自的应用程序提供。咱们能够装置它们的任意组合来测试几个行将公布的 WebView 版本以及最新的稳固版本。

和 Chrome 一样，WebView 有四个公布渠道：

  • 稳固渠道：

    • 在每个带有 WebView 的 Android 设施上默认装置和更新。
    • 全面测试。最不可能解体或有其余次要谬误。
    • 主要版本每 2- 3 周更新一次，次要版本每 4 周更新一次。

  • 测试频道：

    • 实用于 Android 6（API 级别 23）及更高版本。
    • 在公布前进行了测试，但没有那么稳固。
    • 每周一次的重大更新，而后是稳固的主要更新。

  • 开发频道：

    • 在 Android 7 及更高版本上公开可用。
    • 稳固之前的两个次要更新，代表正在踊跃开发的内容
    • 每周更新一次。
    • 最低限度的测试。

  • 金丝雀构建：

    • 实用于 Android 7 及更高版本。
    • 每日公布。
    • 包含前一天的最新代码更改。
    • 未经测试或应用。

如果寻找特定版本的 Chromium，您能够在 Chromium Dash 的每个频道中找到最新版本。
如果想看 Android 每次版本更新的具体介绍，能够查看这里。

引擎介绍

平时中，咱们常常会提到引擎，然而又分不清其中哪个蕴含哪个，他们是什么样的关系，上面给大家梳理一下。

每个浏览器引擎其实都蕴含两个局部，一个是 JS 引擎，一个是渲染引擎，目前支流的无关 js 的引擎又有三个，上文提到过的Webkit，还有Blink、Gecko，重点介绍下前两个

Webkit

WebKit 是 Apple 开发的浏览器引擎，于 2001 年 6 月 25 日在 Apple 外部启动，次要用在 Safari 网络浏览器以及所有 iOS 网络浏览器(IOS 上的谷歌浏览器、Edge 浏览器、火狐浏览器等等)，Webkit 的渲染引擎为WebCore，JS 引擎为JavaScriptCore。

2008 年 6 月 2 日，WebKit 我的项目革新成 SquirrelFish Extreme（缩写为 SFX，市场名称为 Nitro），2008 年 9 月 2 日，V8 作为 Chrome 的一部分首次亮相，其性能比之前的任何引擎都要好得多！紧接着 Apple 公司于 9 月 18 日发表，WebKit 将 JavaScript 编译老本机机器代码，打消了对字节码解释器的须要，从而放慢了 JavaScript 的执行速度。其性能比其前身进步了 30%。

查问 webkit 引擎反对个性和 CSS 性能，能够点这里

Blink

按提交次数，谷歌之前始终是 WebKit 代码库的最大贡献者，然而因为和 Apple 公司对 WebKit 将来思考的抵触，2013 年 4 月 3 日，Google 发表将 WebKit 里的 渲染引擎 WebCore 的其中一个分支，命名为 Blink，Blink 引擎 打造了本人的渲染引擎及 V8 JavaScript 引擎，下面常常说到了 Chromium，而 Blink 其实就是 Chromium 整体的一部分。

而什么是 Chromium，Chromium是一个收费的开源软件我的项目，始终由谷歌保护，Chromium 为 Google Chrome 提供了绝大多数源代码，因而 Google 抉择了“Chromium”这个名称。能够了解为 Chromium + 集成 Google 产品 = Google Chrome

Google Chrome 是个商业我的项目，而 Chromium 是一个中立、无立场的。另外采纳 Chromium 的浏览器 Microsoft Edge、Opera、Qihoo 360 Secure Browser 等等，另外还有一些驰名的框架也在应用，比方 Electron

如 QQ 浏览器、UC 浏览器、Chrome 浏览器等，它们内置了本人的内核或者将别家的内核加以革新，和安卓内 WebView 并没有什么关系。然而某些安装包很小的浏览器，如旗鱼浏览器（点此下载），via 浏览器、神奇浏览器等，他们通过间接调用安卓零碎内自带的 webview 来浏览网页

WebView DevTools

咱们理解完 WebView，就须要学会怎么调试 WebView，下面说过，咱们能够通过任意组合来测试几个行将公布的 WebView 版本以及最新的稳固版本。

咱们能够装置一个稳定版，一个 dev，一个 beta，一个 canary。每个包在装置实现关上后，会主动在桌面生成工具图表，咱们还能够查看设施上产生的 WebView 解体。

而后就能够关上工具进行调试

如果想对 稳定版安卓 WebView的原生里的参数进行调试，也能够装置 WebView Test

目前通过自己测试，OPPO 手机 带多用户性能的手机无奈切换 WebView，因为在装置后进入 WebView implementation 时，新装置的 WebView 会禁用，上面提醒 已为其它用户和访客卸载此性能。在其余手机测试了下，均没发现什么问题。

我分享下具体的装置过程：

Android 10（API 级别 29）及更高版本

  1. 启用 Android 的开发者选项菜单
  2. 通过 Playstore 装置独自的 WebView Beta 应用程序
  3. 导航到开发人员选项 > WebView 实现，抉择您要用于 WebView 的 WebView 通道

Android 7 到 9（API 级别 24 – 28）

  1. 启用 Android 的开发者选项菜单
  2. 装置 Chrome 测试版
  3. 导航到开发人员选项 > WebView 实现，抉择您要用于 WebView 的 Chrome 频道

装置过程可能会碰到很多问题，欢送私信作者自己

WebView 在浏览器中调试

对于 web 前端同学来讲，在浏览器上调试可能会更相熟一点，我上面分享下 WebView 的浏览器调试办法

安卓

在 Android 4.4 (KitKat) 或更高版本上，能够应用谷歌浏览器的 开发者工具 调试 Android 我的项目中的 WebView 内容。

  1. 首先咱们须要在我的项目里 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WebView.setWebContentsDebuggingEnabled(true);}

    WebView 调试不受 debuggable 利用程序清单中标记状态的影响。如果您只想在 debuggable 是 true 时启用 WebView 调试，请在运行时测试该标记。

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)){WebView.setWebContentsDebuggingEnabled(true); }}

    以上设置实用于应用程序的所有 WebView。

  1. 关上手机的开发者模式，连贯上电脑，而后关上应用程序的 WebView。
  2. 进入 chrome://inspect，页面显示了设施上启用调试的 WebView 列表。要开始调试，请单击要调试的 WebView 下方的 inspect。

IOS

  1. 在 mac 电脑上连贯上手机，启动我的项目，关上 WebView 页面
  2. 关上 Safari，在 开发 工具栏里，能够看到你的模拟器或者手机的名称，找到对应的页面即可开始调试

最初，如果大家想晋升挪动端页面的加载速度，能够查看这篇 –>《性能优化必备：让你的挪动端网页 1s 之内出现！》

参考链接：
https://en.wikipedia.org/wiki/WebKit
https://en.wikipedia.org/wiki/Blink_(browser_engine))
https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium#Browsers_based_on_Chromium)
https://developer.apple.com/documentation/webkit/wkwebview
https://developer.android.com/guide/webapps/migrating
https://developer.chrome.com/docs/multidevice/webview/
https://developer.android.com/guide/webapps/webview-testing
https://geekflare.com/android-system-webview/
https://chromium.googlesource.com/chromium/src/+/master/android_webview/docs/developer-ui.md
https://developer.chrome.com/docs/devtools/remote-debugging/webviews/

退出移动版