Webview是什么浏览器？

首頁 Q&A Webview是什麼程式？為什麼網站在Webview開啟出了問題？

不知道大家還記得不久前Webview程式錯誤，導致Android手機大規模的當機，還上了科技新聞頭條一事？若沒有這一次的新聞事件，大部分的人可能從未聽過Webview這個軟體是什麼，今天我們用淺顯易懂的方式分享Webview的前世今生。

Webview提供了更為整合的用戶體驗

不論是手機或是電腦，連上網路後，必須使用瀏覽器(Browser)才能觀看網頁，除了手機內建瀏覽器以外，其實手機都有一個迷你瀏覽器，在Android被稱為Webview，而iOS上則稱為WKWebView，但作用是一樣的：無須切換程式，就能快速觀看網頁內容。

值得一提的是Android上的Webview早期有資安問題，但Webview與Android綑綁在一起，導致安全問題更新困難，直到Android 5.0版本之後Webview正式成為獨立項目，用戶可以自行開啟、關閉、更新Webview程式。

瀏覽網頁，運行網站程式(App)更順暢

手機上各式各樣的App，不論是社群、新聞、影音、娛樂、購物...幾乎大多數的App都有機會開啟網頁內容，但如果每觀看一個網頁就得切換App就會顯得十分不流暢，如果能在App內就能觀看到網頁內容，App的整體感受會提升許多，這也就是Webview的價值。

有時你開啟遊戲內的通知，會跳出一個網頁貼在遊戲畫面前端，這也是Webview的功能之一。此外，社群媒體開啟網頁連結時，往往不會直接跳到瀏覽器上，而是迅速的切換到一個視窗觀看訊息，這也是Webview的功勞。

Webview瀏覽器功能精簡，卻有許多問題

也因為Webview太過萬用，所以越來越多相關的問題產生。最常見的問題之一就是Webview的相容性，因為Webview是一個精簡的瀏覽器，從介面就可以看到：沒有網址列、功能鍵等就是一個明顯的外觀差異，事實上內在功能也有許多差異，由於精簡，所以可能會導致一部分的網頁程式運行出問題，例如早期的Webview經常會出現網頁填寫表格視窗時，出現無法送出表單的問題。

另一個是體驗上的落差，相信大家都有過一個體驗：開啟了通訊軟體後開啟購物或是社群網頁，出現的畫面是請你填寫帳號密碼，而不是網頁內容，這是因為你的Webview沒有儲存你的帳號密碼，而是存在你的手機瀏覽器上，才會出現這樣的錯誤。

另外上述提到的版本問題，就如同瀏覽器一樣，不同的版本有不同的Bug Fix，也可能會有新的Bug產生，例如2021年三月的Webview大規模錯誤事件，發生之後Android手機幾乎難以運行，這也讓Webview的穩定性被打上問號。

為何PDF開啟後的抬頭名稱，與PDF檔案名稱不同？

浏览器兼容性是前端常见问题，经常有人会问：我的代码在xx浏览器上可以用，为什么在HBuilder真机运行或打包的就有问题？

先说iOS。

iOS的webview有uiwebview和wkwebview的区别

从iOS8起，Apple推出了wkwebview，Safari默认使用wkwebview。
由于iOS13将uiwebview列入非公开api，并说明未来会禁止使用uiwebview的应用上架。所以从HBuilderX 2.2.5起，默认使用的是wkwebview，如果要切换为uiwebview，需要在manifest里或创建webview时的参数里指定kernel。
uni-app的app端视图层固定使用wkwebview。这个和微信小程序的策略一样，它在iOS上也是只能渲染在wkwebview下。
这两种webview各有利弊。
wk的问题是：不支持websql（iOS8、9上不支持，iOS10恢复支持）、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、在联网及本地文件读取等有各种跨域限制、wk第一次渲染速度略慢于uiwebview；（uni-app的js本来也不运行在webview里，所以无所谓这些限制）
但wkwebview的好处是：节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示（滚动前就加载图片不受影响）、wkwebview的video播放支持AirPlay（uni-app的video组件是原生的，暂不支持ariplay）。
如果同时在一个app里使用ui和wk两种webview，注意2种webview之间的cookie、localstorage、session不共享，但plus.storage是共享的。
详细的wkwebview的使用注意参考：//ask.dcloud.net.cn/article/36348

Android手机的webview，分系统webview和x5两种

Android系统webview

系统webview，是默认的webview，及Google的Android system webview，它自带于手机rom中，所有依赖系统webview的应用都调用这个webview。
在Android4.4以前，webview是Android webkit 浏览器内核，很多HTML5标准语法不支持，比如indexeddb、webgl等，canvas性能也非常差。
Android4.4起，变成了chromium内核，内核版本是chrome30，性能和现代语法支持大幅提升。
从Android5开始，webview脱离rom可单独更新，伴随着chrome的发版，google会在google play store上同步更新Android system webview。
由于google play store被墙，国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。//a.vmall.com/app/C10730262
也有个别国产rom改坏了这块的机制，使得自身的system webview无法独立安装升级。
目前国内的Android5以上手机webview版本差异很大，从chrome37一直跨度到60，手机用户侧使用了到底是哪个版本是不一定的。
所以HBuilder的开发者需要注意，尽量不要使用chrome40以后的新增的语法，使用普通常规的写法完成业务开发。

关于如何查看Android手机端webview的版本：

1. 日志里查ua
2. 在系统设置里找到所有应用，显示隐藏系统进程，在里面找到Android system webview，显示的版本即为chrome版本。

• Android手机默认浏览器和webview的区别
  国外品牌的安卓手机，自带浏览器就是chrome。而国内安卓手机，自带浏览器大多是QQ浏览器、UC浏览器的贴牌，极个别是自己改造chromium。
  所以手机自带的浏览器并不等于webview，在一个平台可运行，不代表另一个平台可兼容。
  QQ、UC、360等浏览器也基本是基于chromium做改造，不同版本的浏览器其使用的chromium内核版本也不一样。具体可以打印ua查看。
  注意夜神等安卓模拟器的Android版本是4.4，很多新语法都不支持。

• 如果你有影响用户的能力，为了给用户更好的体验，可以引导Android用户安装最新版Android system webview。应用宝、华为、金立等应用市场均可下载这个apk，或者翻墙到google play store。
  在华为、小米、金立手机上，wifi下会自动更新Android system webview。
  尤其是有些Android5用户使用的Android system webview 37版本，有硬件加速bug，闪屏花屏，此时升级webview即可解决。

• 有人问可否在打包时直接集成新版Android system webview，减少浏览器兼容问题？
  webview体积至少50M起，体积实在太大了。有兴趣的开发者可以自己研究离线打包。
  倒是可以这样：js里判断当前手机是Android5以上，且webview版本过低，比如低于40（ua可以判断），可以提醒用户是否升级webview，然后引导用户去之前贴出的地址下载更新webview。
  但不管怎么样，尽量少写可能遇到兼容性问题的代码。

Android App也可以使用x5 webview

从HBuilderX 2.5.3起，支持使用腾讯的x5内核，详见文档//ask.dcloud.net.cn/article/36806

各小程序平台的webview内核说明

• 各家小程序，在iOS上大多使用的是wkwebview内核，已知仅百度小程序是uiwebview。wkwebview是iOS的一部分，其版本根据iOS版本的不同而不同。可以在caniuse直接看到iOS版本对应的浏览器兼容问题。
• Android上各家小程序使用的是基于chromium改造的浏览器内核。具体如下：
  • 微信：老版微信使用的是x5，ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903；后来微信团队自研了MWEB内核，ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
  • 百度小程序：ua特征是Chrome/63.0.3239.83，并且包含baiduboxapp字符串
  • 支付宝小程序：根据支付宝版本，chrome有57和69等版本，ua特征字符串有NebulaSDK
  • QQ小程序：根据QQ版本，chrome有66和68等版本，ua特征字符串有QQ/MiniApp
  • 头条小程序：ua特征是Chrome/62，ua特征字符串有ToutiaoMicroApp

uni-app中，js方面不存在浏览器兼容问题，因为js都使用的是独立的js引擎，与webview无关，API也是仅小程序支持的API才可以使用。所以uni-app的浏览器兼容性问题，主要是css。注意不要使用太新的css就可以。

如果要查阅真机运行和打包的区别，访问此文：//ask.dcloud.net.cn/article/1322

Webview 是一个基于webkit的引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）

Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

webview主要用于什么地方？或者说什么需求下会使用到webview?

个人理解，电脑上展示html页面，通过浏览器打开页面即可浏览，而手机系统层面，如果没有webview支持，是无法展示html页面，所以webview的作用即用于手机系统来展示html界面的

所以它主要在需要在手机系统上加载html文件时被需要

一个原生应用调用html页面的过程？

1.原生应用加载html页面（加载页面的方式可能有多种，比如加载本地写好的html文件，或者放置在服务器的文件）

2.加载完成，展示就是通过webview来渲染展示的，如果系统没有webview，则是无法渲染展示html的

2步其实一个原生应用调用html页面过程已经完成了，那么页面不光展示，有时候可能还需要交互，这里的话就需要写一些方法了，比如html界面的按钮需要调用系统原生的东西（比如：拍照，系统的文件，相册之类的）。原生端就负责维护html调用的接口，然后按照需要返回（原生端充当一个server的角色，html充当一个client角色）

使用webview的好处？

原生APP是将页面的布局设计，以及业务代码打包然后用户下载安装使用，而webview是通过加载html文件来进行页面的展示，当需要更新页面布局的或者业务逻辑变更时，如果是原生的APP就需要修改前端内容，升级打包，重新发布才可以使用最新的。

而通过webview方式的页面则只需要修改html代码或者js文件（如果是从服务器端获取，只要新的文件部署完成），用户重新刷新就可以使用更新后的，无需通过下载安装的方式完成升级。

以上就是webview是什么的详细内容，更多请关注我！！！