webview 介紹

webview 主要應用在手機上作為內崁瀏覽器
以便在使用任何 APP 點開外連網址時可以不用跳出去
優點是使用 APP 的驗感佳缺點是外連網站的體驗感不佳 XD
因為 webview 使用的瀏覽器往往不是主流瀏覽器所以語法支持上較差…

底下先筆記重點:

webview 不是手機上默認的瀏覽器
webview 不是手機上自帶的瀏覽器

webview 是手機上的系統瀏覽器

webview 版本

在對 webview 有了基本的認識以後接下來要談到如何分別版本
分辨版本對於 webview 除錯有相當大的幫助

先講重點:

Android 和 iOS 是不一樣的路線

Android

Android 在 Android 5 以後 webview 從核心系統裡獨立出來
一般手機可能可以在: 設定 -> 應用程式 -> 全部 -> 裡面找到 Android System WebView
(實際上要看你手機是哪一個牌子… 才能知道他在哪裏 XD)

Android System WebView 就是 Android 的系統瀏覽器啦
主要是跟隨 Chrome 的核心技術用的是基於 Chromium 的瀏覽器 (google 下開源的項目)
點開此應用就可以看到版本了但是版本前顯示的不一定是 Chromium/googel/chrome 相關字樣
而是顯示 package name , 此 package name 和廠商訂定有關
如需升級版本也需要找到對應 package name 的更高版本才行

iOS

單純很多

iOS2 ~ iOS7 : UIWebView
iOS8+ : WKWebView

如果本地開 Server 讓手機打開 webview 連線
其實從終端機其實就可以看到設備的瀏覽器版本資訊了
顯示的內容就和平常瀏覽器讀取navigator.userAgent 是一樣的

底下 iPhone 上示範

1	"Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1"

底下 Chrome 上示範

1	"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36"

在這邊 Andorid 和 iOS 都是一樣的
不難看出使用者的設備與使用的瀏覽器版本

webview 如何除錯

這個答案要看 webview 連到哪邊

如果是連到三方有問題就是三方的問題請相關人士去處理 XD

如果連到的網站屬於需要自行維護範圍內的網站就得自行處理 Orz..

可以先在 APP 端將 webview 連到 localhost 打包成 apk / ipa 另訂版本號
或直接使用 adb 連手機安裝應用

接下來連本地 Server 查看對應的 webview 版本
確認版本後就可以上網找到對應的版本下載
然後開始在本地 console 除錯

通常就是 ES 版本問題, polyfill 加上的墊片不夠或沒有加到關鍵的墊片 XD

最後用手機 webview 連 localhost 做最後的結果確認
沒問題就可以把 webview 線上的網址給改回去了 (撒花)

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/25/webview/