做過Android混合開發(fā)的兄弟應(yīng)該都有這種感受項(xiàng)目里H5頁面越來越多活動頁、商品詳情、運(yùn)營配置頁全往WebView里塞結(jié)果自己卻要跟原生WebView的進(jìn)度條、文件下載、JS通信、生命周期來回較勁。后來我把項(xiàng)目里的WebView相關(guān)邏輯整個(gè)換成了AgentWeb這個(gè)三方封裝庫混合開發(fā)才終于變得像正常開發(fā)。這篇是系列第一篇先聊清楚為什么選它、怎么正確接入、以及那些文檔里不怎么寫但實(shí)際項(xiàng)目中繞不開的配置細(xì)節(jié)。不管你是剛接觸混合開發(fā)的新手還是被原生WebView折騰過幾次的老手這篇都適合作為一份可以直接參考的落地筆記。1. 放著原生 WebView 不用為啥非要選 AgentWeb1.1 原生 WebView 的幾個(gè)老毛病先說說我最早用原生WebView踩坑的經(jīng)歷。第一是內(nèi)存泄漏Activity銷毀了結(jié)果WebView還在后臺加載頁面排查的時(shí)候發(fā)現(xiàn)是WebView持有Activity的引用沒釋放每次都泄漏一部分內(nèi)存頁面開多了應(yīng)用直接卡頓。第二是生命周期管理WebView的onResume、onPause、onDestroy都得自己找時(shí)機(jī)調(diào)漏一個(gè)就可能導(dǎo)致播放視頻沒聲音、頁面不刷新這類詭異問題。第三是樣板代碼太多進(jìn)度條要自己寫、文件下載要自己接管、JS調(diào)用要自己搭橋一套下來小一百行代碼起步。第四是廠商定制內(nèi)核帶來的兼容性問題同一套代碼在不同機(jī)型上行為不一樣有些機(jī)型的WebView甚至不按標(biāo)準(zhǔn)回調(diào)走。這些問題的本質(zhì)是原生WebView給的是基礎(chǔ)能力混合開發(fā)場景里的容器邏輯都要自己補(bǔ)。一旦你負(fù)責(zé)的業(yè)務(wù)模塊多了這類重復(fù)代碼會翻好幾倍而且測試成本非常高。AgentWeb能流行起來不是因?yàn)樗隽耸裁刺祉斝强萍级撬堰@堆通用需求做成了開箱即用的配置項(xiàng)開發(fā)者只需要關(guān)注自己的業(yè)務(wù)邏輯。1.2 AgentWeb 到底幫我們解決了什么AgentWeb嚴(yán)格來說不是一個(gè)瀏覽器內(nèi)核它是基于系統(tǒng)WebView做的一個(gè)輕量級封裝庫官方定位就是讓Android開發(fā)者用更少的代碼搞定WebView容器。它內(nèi)部幫我們做了幾件非常實(shí)在的事自動綁定Activity或Fragment的生命周期頁面銷毀時(shí)自動釋放資源從根源上解決絕大多數(shù)內(nèi)存泄漏問題。內(nèi)置了進(jìn)度條、錯(cuò)誤頁、文件下載、文件上傳這些高頻能力開幾個(gè)開關(guān)就能用。對WebViewClient、WebChromeClient、JavascriptInterface做了更好的封裝JS和原生通信的邏輯可以寫得更干凈。統(tǒng)一了不同Android版本和廠商ROM之間的行為差異減少適配成本。提示AgentWeb只是容器層的封裝內(nèi)核還是系統(tǒng)WebView。如果你追求極致的加載速度和渲染效果后期可以考慮接入騰訊X5或系統(tǒng)內(nèi)核的WebView但那是另一個(gè)話題系列后面有機(jī)會專門聊。我實(shí)際用下來的感受是接入AgentWeb之后WebView相關(guān)的代碼量能少一半以上而且很多以前需要盯著手機(jī)一臺臺適配的問題庫已經(jīng)幫我們處理掉了。這也是我推薦它的核心原因。2. 集成前的準(zhǔn)備工作和最小工程結(jié)構(gòu)2.1 依賴引入與初始化在項(xiàng)目級的build.gradle中確認(rèn)已經(jīng)配置好倉庫然后在模塊級的build.gradle里加上AgentWeb的依賴。版本號建議直接以官方最新Release為準(zhǔn)不要盲目用老版本因?yàn)閃ebView的適配和Android系統(tǒng)版本強(qiáng)相關(guān)新版本通常會修復(fù)一些廠商兼容問題和系統(tǒng)安全策略變更帶來的坑。dependencies { implementation com.just.agentweb:agentweb:最新版本號 }如果你的項(xiàng)目用到了AndroidX選對應(yīng)支持AndroidX的版本如果項(xiàng)目還在用舊的支持庫則要選對應(yīng)的老版本。依賴坐標(biāo)具體怎么寫每個(gè)版本略有差別這里就不寫死版本號了防止誤導(dǎo)。引入依賴之后建議在Application的onCreate里做一次初始化。AgentWeb其實(shí)不需要手動初始化但我會習(xí)慣性地在這里做一些全局配置比如public class App extends Application { Override public void onCreate() { super.onCreate(); // 這里可以放置全局的WebView相關(guān)配置 } }2.2 權(quán)限聲明與混淆規(guī)則在AndroidManifest.xml里需要聲明網(wǎng)絡(luò)權(quán)限。如果后面要支持下載文件、定位等功能記得把對應(yīng)權(quán)限一并加上uses-permission android:nameandroid.permission.INTERNET / uses-permission android:nameandroid.permission.ACCESS_NETWORK_STATE /混淆配置這一塊必須配好。雖然AgentWeb本身是開源庫但它內(nèi)部用了大量反射和動態(tài)代理混淆不過會導(dǎo)致頁面白屏或者JS調(diào)用失效。在proguard-rules.pro里加上以下幾行-keep class com.just.agentweb.** { *; } -keep class com.just.agentweb.core.** { *; } -keep class com.just.agentweb.widget.** { *; }如果項(xiàng)目里還混淆了WebView相關(guān)的類記得把你自己寫的JavascriptInterface接口類也加上keep規(guī)則否則混淆之后JS那邊找不到對應(yīng)的方法名通信鏈路直接斷裂。2.3 頁面承載方式的選擇接入AgentWeb之前建議先想清楚一個(gè)基礎(chǔ)問題用Activity承載還是用Fragment承載。我的經(jīng)驗(yàn)是能用獨(dú)立Activity就用獨(dú)立Activity每個(gè)H5業(yè)務(wù)模塊一個(gè)Activity對應(yīng)一個(gè)AgentWeb實(shí)例。原因有兩個(gè)一是Activity的生命周期清晰AgentWeb自動綁定生命周期時(shí)不容易出錯(cuò)二是當(dāng)H5頁面進(jìn)入二級三級頁面時(shí)返回棧管理在Activity層面更可控。如果你必須在一個(gè)Activity里切換多個(gè)H5頁面那么建議用Fragment來做容器每個(gè)Fragment持有自己的AgentWeb實(shí)例。但這樣要特別注意Fragment的隱藏和顯示時(shí)機(jī)處理不當(dāng)會出現(xiàn)多個(gè)WebView同時(shí)存活的內(nèi)存問題。3. 5分鐘接入一個(gè)能上線的H5容器頁3.1 核心代碼AgentWeb鏈?zhǔn)絼?chuàng)建接入AgentWeb的代碼非常簡潔核心就是鏈?zhǔn)秸{(diào)用。先看一個(gè)最基礎(chǔ)的示例后面再逐個(gè)方法拆開講public class WebActivity extends AppCompatActivity { private AgentWeb mAgentWeb; private FrameLayout mContainer; Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_web); mContainer findViewById(R.id.web_container); mAgentWeb AgentWeb.with(this) .setAgentWebParent(mContainer, new FrameLayout.LayoutParams(-1, -1)) .useDefaultIndicator(getResources().getColor(R.color.colorPrimary)) .defaultWebClient() .openParallelDownload() .setWebChromeClient(mWebChromeClient) .setWebViewClient(mWebViewClient) .createAgentWeb() .ready() .go(https://example.com/h5/page); } private WebChromeClient mWebChromeClient new WebChromeClient() { Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // 更新標(biāo)題欄 } }; private WebViewClient mWebViewClient new WebViewClient() { Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 攔截URL return super.shouldOverrideUrlLoading(view, url); } }; }這段代碼執(zhí)行完一個(gè)帶默認(rèn)進(jìn)度條的WebView容器就能用了。布局文件里只需要放一個(gè)FrameLayout作為容器根節(jié)點(diǎn)?xml version1.0 encodingutf-8? FrameLayout xmlns:androidhttp://schemas.android.com/apk/res/android android:idid/web_container android:layout_widthmatch_parent android:layout_heightmatch_parent /3.2 每個(gè)方法是什么意思setAgentWebParent把AgentWeb創(chuàng)建的WebView塞到這個(gè)ViewGroup中。這里要注意容器必須是ViewGroup否則WebView沒有掛載點(diǎn)。布局參數(shù)建議直接填-1、-1也就是match_parent因?yàn)閃ebView一般就是撐滿整個(gè)容器。useDefaultIndicator開啟默認(rèn)的頂部進(jìn)度條?？梢詡魅腩伾殿伾詈酶鶤pp主題色一致。如果你覺得默認(rèn)進(jìn)度條太細(xì)也可以自定義一個(gè)這個(gè)后面在配置章節(jié)單獨(dú)說。defaultWebClient這個(gè)是AgentWeb的關(guān)鍵方法相當(dāng)于一鍵開啟一套默認(rèn)的WebViewClient和WebChromeClient配置比如輔助處理文件上傳、頁面加載錯(cuò)誤等行為。如果不需要完全自定義直接用默認(rèn)實(shí)現(xiàn)就夠了。openParallelDownload開啟并行下載能力也就是說用戶長按圖片或者點(diǎn)擊下載鏈接時(shí)AgentWeb可以接管下載任務(wù)而不是讓W(xué)ebView自己嘗試打開下載文件。這一步在原生WebView里是要自己寫DownloadListener的這里一行搞定。createAgentWeb().ready().go(url)創(chuàng)建AgentWeb實(shí)例并加載最終URL。ready方法必須調(diào)用它負(fù)責(zé)綁定生命周期監(jiān)聽器。go方法傳入U(xiǎn)RL字符串。3.3 生命周期綁定漏了這一步必出大問題AgentWeb的自動生命周期管理是它最大的優(yōu)勢但前提是你得正確調(diào)用。在Activity中把下面這幾行加上Override protected void onResume() { if (mAgentWeb ! null) { mAgentWeb.getWebLifeCycle().onResume(); } super.onResume(); } Override protected void onPause() { if (mAgentWeb ! null) { mAgentWeb.getWebLifeCycle().onPause(); } super.onPause(); } Override protected void onDestroy() { if (mAgentWeb ! null) { mAgentWeb.getWebLifeCycle().onDestroy(); } super.onDestroy(); }getWebLifeCycle()是AgentWeb暴露出來的生命周期控制器。onResume里讓W(xué)ebView恢復(fù)加載onPause里暫停所有動畫、定位、視頻等耗時(shí)任務(wù)onDestroy里釋放WebView資源。很多剛開始用AgentWeb的人會漏掉這三行后果是頁面返回之后WebView還在后臺加載App內(nèi)存持續(xù)上漲甚至出現(xiàn)聲音殘留。注意onDestroy里不要直接在agentWeb對象上調(diào)用destroy方法一定要走getWebLifeCycle().onDestroy()。AgentWeb內(nèi)部會對WebView做遞歸銷毀把WebView的引用置空并且移除父容器上的WebView這一步是防止內(nèi)存泄漏的關(guān)鍵。3.4 加載本地HTML和Assets資源開發(fā)階段如果后端接口還沒好可以先用本地HTML調(diào)試。AgentWeb支持直接加載assets目錄下的文件mAgentWeb.getUrlLoader().loadUrl(file:///android_asset/local_demo.html);這里有個(gè)細(xì)節(jié)Android WebView默認(rèn)是允許加載本地文件和遠(yuǎn)程資源混用的但出于安全考慮很多團(tuán)隊(duì)會把setAllowFileAccessFromFileURLs關(guān)掉。AgentWeb的默認(rèn)配置在這方面比較嚴(yán)格如果遇到本地HTML里引用了遠(yuǎn)端資源導(dǎo)致加載失敗需要確認(rèn)一下安全策略配置不要為了方便把安全開關(guān)全打開。4. 混合開發(fā)中最離不開的三類配置4.1 JS與原生互相調(diào)用混合開發(fā)的核心之一就是JS和原生通信。AgentWeb在這塊提供了比較清晰的封裝本質(zhì)上還是基于WebView的JavascriptInterface機(jī)制。原生注入JS接口public class JsInterface { JavascriptInterface public void showToast(String msg) { runOnUiThread(() - Toast.makeText(WebActivity.this, msg, Toast.LENGTH_SHORT).show()); } } mAgentWeb.getJsAccessEntrace().quickCallJs(showToast, hello from native);這里的quickCallJs是AgentWeb封裝好的方法可以在原生側(cè)主動調(diào)用H5頁面里的JS函數(shù)。H5側(cè)調(diào)用原生方法則很簡單在頁面里直接調(diào)用window對象上掛載的方法即可。實(shí)際項(xiàng)目里JS通信有個(gè)高頻坑線程問題。JavascriptInterface的方法是在WebView的私有線程里執(zhí)行的不是UI線程如果你在這個(gè)方法里直接更新UI輕則崩潰重則界面閃爍。正確做法是切到主線程再操作UI上面代碼里用了runOnUiThread。還有一個(gè)坑是方法名混淆前面提過JavascriptInterface接口類一定不能被混淆。4.2 文件下載與上傳的配置混合開發(fā)里最常見的下載場景是用戶長按H5頁面里的圖片保存到相冊或者點(diǎn)擊某個(gè)文件鏈接開始下載。原生WebView默認(rèn)會把下載任務(wù)交給系統(tǒng)瀏覽器處理體驗(yàn)比較割裂。AgentWeb的openParallelDownload可以解決下載問題它會自動創(chuàng)建一個(gè)下載任務(wù)并且通過通知欄顯示進(jìn)度。對于文件上傳也就是H5頁面的input typefile需要配合WebChromeClient的onShowFileChooser來處理。AgentWeb的defaultWebClient已經(jīng)封裝了默認(rèn)邏輯如果你要定制上傳行為可以重寫private WebChromeClient mWebChromeClient new WebChromeClient() { Override public boolean onShowFileChooser(WebView webView, ValueCallbackUri[] filePathCallback, FileChooserParams fileChooserParams) { // 保存回調(diào)打開系統(tǒng)文件選擇器 mFilePathCallback filePathCallback; Intent intent new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType(*/*); startActivityForResult(intent, FILE_CHOOSER_REQUEST_CODE); return true; } };onActivityResult里記得把選擇結(jié)果回傳給WebViewOverride protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode FILE_CHOOSER_REQUEST_CODE) { if (mFilePathCallback ! null) { Uri result data ! null ? data.getData() : null; mFilePathCallback.onReceiveValue(result ! null ? new Uri[]{result} : null); mFilePathCallback null; } return; } super.onActivityResult(requestCode, resultCode, data); }這里的回調(diào)對象必須在收到結(jié)果后置空否則下一次上傳會失效。這也是網(wǎng)上問得比較多的問題我自己第一次這個(gè)坑也踩過。4.3 進(jìn)度條、標(biāo)題同步與錯(cuò)誤頁處理默認(rèn)進(jìn)度條是一根細(xì)線很多App會定制成有圓角的膠囊進(jìn)度條或者直接改成仿Safari風(fēng)格的加載動畫。AgentWeb是支持自定義進(jìn)度條樣式的核心方式是通過createAgentWeb方法鏈上的.progressBar替換默認(rèn)實(shí)現(xiàn)。我一般偷懶的做法是用useDefaultIndicator加顏色值就夠線上用了因?yàn)榇蠖鄶?shù)用戶對進(jìn)度條樣式并不敏感。標(biāo)題同步這個(gè)功能建議通過onReceivedTitle回調(diào)來做。H5頁面切換標(biāo)題時(shí)WebView會回調(diào)這個(gè)方法你在里面動態(tài)更新Activity的標(biāo)題欄即可。要注意的是有些頁面會動態(tài)修改document.title這個(gè)回調(diào)觸發(fā)時(shí)機(jī)不固定極端情況下標(biāo)題會上下跳動。錯(cuò)誤頁處理比較重要。在WebViewClient的onReceivedError里可以看到加載失敗的URL和錯(cuò)誤碼。AgentWeb默認(rèn)會顯示一個(gè)錯(cuò)誤頁但樣式比較簡陋。我的建議是線上環(huán)境直接用默認(rèn)錯(cuò)誤頁不要過度定制因?yàn)槎ㄖ棋e(cuò)誤頁需要額外維護(hù)一套靜態(tài)資源而且錯(cuò)誤頁畢竟只是兜底方案頻次不該太高。如果發(fā)現(xiàn)某個(gè)環(huán)境下錯(cuò)誤頁頻繁出現(xiàn)優(yōu)先排查網(wǎng)絡(luò)策略和HTTPS證書問題而不是糾結(jié)錯(cuò)誤頁樣式。5. 實(shí)際項(xiàng)目里那些文檔沒寫的坑5.1 常見問題速查表問題現(xiàn)象可能原因解決思路頁面白屏但URL能正常打開WebView加載失敗或資源被攔截檢查網(wǎng)絡(luò)請求是否被代理攔截查看onReceivedError回調(diào)JS調(diào)用原生方法無反應(yīng)混淆導(dǎo)致方法名丟失給JavascriptInterface類和接口方法加keep規(guī)則返回上級頁面時(shí)WebView直接退出返回鍵事件被Activity消費(fèi)用AgentWeb的onKey事件攔截優(yōu)先回退WebView內(nèi)部頁面棧上傳文件時(shí)點(diǎn)擊按鈕沒反應(yīng)文件選擇回調(diào)被系統(tǒng)回收確認(rèn)onShowFileChooser正確調(diào)用并且回調(diào)對象沒有泄漏加載HTTPS頁面提示證書錯(cuò)誤系統(tǒng)時(shí)間不對或證書鏈不完整檢查系統(tǒng)時(shí)間或與后端確認(rèn)證書鏈?zhǔn)欠裢暾麖牧斜眄撨M(jìn)入H5第二次加載變慢WebView緩存策略不合適使用默認(rèn)緩存模式耗盡性能換內(nèi)存5.2 返回鍵處理與物理按鍵攔截Android的返回鍵默認(rèn)邏輯是直接結(jié)束Activity但在WebView場景下用戶預(yù)期是返回上一個(gè)頁面。AgentWeb提供了返回鍵事件處理機(jī)制推薦寫法如下Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (mAgentWeb ! null mAgentWeb.handleWebEvent(keyCode, event)) { return true; } return super.onKeyDown(keyCode, event); }handleWebEvent會先檢查WebView內(nèi)部是否有可回退的歷史記錄如果有就返回上一頁沒有才交給系統(tǒng)處理。這個(gè)雖然是個(gè)小細(xì)節(jié)但直接影響體驗(yàn)很多混合開發(fā)的新手會漏掉。5.3 UserAgent 拼接與客戶端標(biāo)識很多H5頁面會通過UserAgent來判斷當(dāng)前環(huán)境比如區(qū)分是App內(nèi)打開還是普通瀏覽器打開從而展示不同的運(yùn)營位。WebView的默認(rèn)UserAgent里沒有App標(biāo)識需要在加載頁面之前手動拼接。String defaultUA mAgentWeb.getWebCreator().getWebView().getSettings().getUserAgentString(); String customUA defaultUA AppName/2.1.0; mAgentWeb.getWebCreator().getWebView().getSettings().setUserAgentString(customUA);拼接的位置建議放在createAgentWeb之前通過WebView的settings直接設(shè)置。注意UserAgent不能設(shè)置得太長有些服務(wù)端解析UA的正則對超長UA處理不友好實(shí)測下來在默認(rèn)UA后面追加App名和版本號是最穩(wěn)的。5.4 與業(yè)務(wù)線多頁面復(fù)用時(shí)的單例問題如果App里同時(shí)打開了多個(gè)AgentWeb實(shí)例一定要確認(rèn)每個(gè)頁面持有的是獨(dú)立的WebView對象。AgentWeb本身沒有全局單例的限制但如果你在Activity里用了靜態(tài)變量去引用AgentWeb就會出大問題頁面A關(guān)了靜態(tài)變量還指著它的WebView頁面B拿到這個(gè)引用后操作的就是一個(gè)已銷毀的對象各種詭異崩潰接踵而至。我的建議是凡是Activity或Fragment持有的AgentWeb一律做成成員變量不要靜態(tài)持有。實(shí)在要在多個(gè)頁面共享登錄態(tài)、Cookie盡量通過WebView的CookieManager同步機(jī)制來做。5.5 關(guān)于后續(xù)系列的一些想法這篇先講到AgentWeb的基礎(chǔ)接入和核心配置主要是幫大家把混合開發(fā)的底座打穩(wěn)。后面我會繼續(xù)寫H5與原生通信的安全校驗(yàn)怎么做、如何用AgentWeb實(shí)現(xiàn)一個(gè)支持離線包預(yù)加載的H5容器、視頻播放控制、以及從AgentWeb容器平滑切換到X5內(nèi)核的實(shí)戰(zhàn)思路。如果項(xiàng)目里WebView頁面的啟動速度一直是痛點(diǎn)離線包和預(yù)加載這部分值得重點(diǎn)關(guān)注。在自己的實(shí)際項(xiàng)目中我最大的體會是混合開發(fā)的技術(shù)門檻并不在WebView本身而在工程化的細(xì)節(jié)管理上。AgentWeb幫我們封住了大部分底層的坑但如果接入姿勢不正確返而會引入新問題。建議第一次接入時(shí)先按這篇文章的最小步驟跑通一個(gè)簡單頁面再逐步疊加功能需求。按這個(gè)順序走項(xiàng)目基本不會出現(xiàn)大方向上的偏差。