Android 與 H5 頁面交互：選擇 Cordova/Capacitor 還是原生 WebView？

專案需嵌入 H5 頁面且要求雙向流暢交互（呼叫原生相機、彈窗、鍵盤、檔案存取等），直接用 WebView 手寫 @JavascriptInterface 容易踩坑（執行緒、權限、生命週期、跨域）。成熟方案是採用 Cordova 或其現代化繼任者 Capacitor，或 Ionic (Capacitor 為核心)。

為什麼推薦 Cordova / Capacitor？

• 現成外掛生態：相機、掃碼、推播、生物辨識、檔案系統、App 更新…幾百個外掛 cordova plugin add xxx 即裝即用。
• 統一 JS 介面：navigator.camera.getPicture(success, fail) 同一行代碼同時支援 Android/iOS，無需雙端維護。
• 生命週期管理：自動處理 onPause/onResume、權限請求回調、WebView 重建等棘手細節。
• 效能優化：WKWebView (iOS) / Chrome Custom Tab / System WebView (Android 7+) 自動切換，支援 cordova-plugin-wkwebview-engine 強制高效能渲染。

架構選型決策樹

專案複雜度低、僅顯示靜態 H5、無原生 API 需求
        │
        ├─ 是 → 直接用 WebView + 少量 @JavascriptInterface
        │
        └─ 否 → 需呼叫原生功能、離線儲存、推播、跨平台
                  │
                  ├─ 團隊熟悉 Angular/React/Vue → Ionic + Capacitor (首選)
                  │
                  └─ 團隊偏原生、需精細控制 → Cordova + 自訂外掛

若堅持原生 WebView，必做清單

1. 啟用 setJavaScriptEnabled(true)、setDomStorageEnabled(true)、setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW)。
2. 註入介面類：webView.addJavascriptInterface(new JsBridge(), "Android")，方法加 @JavascriptInterface 並回主執行緒 runOnUiThread。
3. 處理 onPageFinished 注入 javascript:window.Android.postMessage('ready') 確保 H5 端 window.Android 可用。
4. 檔案選擇：onShowFileChooser 回傳 ValueCallback，Android 5+ 需申請 READ_EXTERNAL_STORAGE。
5. 攔截 URL Scheme：shouldOverrideUrlLoading 處理 myapp://action?param=1 唚醒原生頁。

總結

「專案嵌入較多 H5、需原生交互」→ 首選 Ionic/Capacitor，開發效能與維護性雙贏；只有極簡單靜態頁面才考慮手寫 WebView。別重複造輪子，站在巨人肩膀上才能專注業務創新。