react-native必备:WebView篇

什么是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 7API 级别 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,还有BlinkGecko,重点介绍下前两个

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 版本以及最新的稳定版本。

 title=
我们可以安装一个稳定版,一个dev,一个beta,一个canary。每个包在安装完成打开后,会自动在桌面生成工具图表,我们还可以查看设备上发生的 WebView 崩溃。

 title=
然后就可以打开工具进行调试

 title=
如果想对稳定版安卓WebView的原生里的参数进行调试,也可以安装WebView Test

 title=

目前经过本人测试,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/

16 声望
0 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木142阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

16 声望
0 粉丝
宣传栏