Android 基礎之 Webview

基本使用

Webview

// 獲取當前頁面的URL
public String getUrl();
// 獲取當前頁面的原始URL(重定向後可能當前url不同)
// 就是http headers的Referer參數，loadUrl時爲null
public String getOriginalUrl();
// 獲取當前頁面的標題
public String getTitle();
// 獲取當前頁面的favicon
public Bitmap getFavicon();
// 獲取當前頁面的加載進度
public int getProgress();

// 通知WebView內核網絡狀態
// 用於設置JS屬性`window.navigator.isOnline`和產生HTML5事件`online/offline`
public void setNetworkAvailable(boolean networkUp);

// 設置初始縮放比例
public void setInitialScale(int scaleInPercent);

WebSettings

WebSettings settings = web.getSettings();

// 存儲(storage)
// 啓用HTML5 DOM storage API，默認值 false
settings.setDomStorageEnabled(true); 
// 啓用Web SQL Database API，這個設置會影響同一進程內的所有WebView，默認值 false
// 此API已不推薦使用，參考：https://www.w3.org/TR/webdatabase/
settings.setDatabaseEnabled(true);  
// 啓用Application Caches API，必需設置有效的緩存路徑才能生效，默認值 false
// 此API已廢棄，參考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
settings.setAppCacheEnabled(true); 
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());

// 定位(location)
settings.setGeolocationEnabled(true);

// 是否保存表單數據
settings.setSaveFormData(true);
// 是否當webview調用requestFocus時爲頁面的某個元素設置焦點，默認值 true
settings.setNeedInitialFocus(true);  

// 是否支持viewport屬性，默認值 false
// 頁面通過`<meta name="viewport" ... />`自適應手機屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加載頁面，默認值 false
// 當頁面寬度大於WebView寬度時，縮小使頁面寬度等於WebView寬度
settings.setLoadWithOverviewMode(true);
// 佈局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

// 是否支持Javascript，默認值false
settings.setJavaScriptEnabled(true); 
// 是否支持多窗口，默認值false
settings.setSupportMultipleWindows(false);
// 是否可用Javascript(window.open)打開窗口，默認值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);

// 資源訪問
settings.setAllowContentAccess(true); // 是否可訪問Content Provider的資源，默認值 true
settings.setAllowFileAccess(true);    // 是否可訪問本地文件，默認值 true
// 是否允許通過file url加載的Javascript讀取本地文件，默認值 false
settings.setAllowFileAccessFromFileURLs(false);  
// 是否允許通過file url加載的Javascript讀取全部資源(包括文件,http,https)，默認值 false
settings.setAllowUniversalAccessFromFileURLs(false);

// 資源加載
settings.setLoadsImagesAutomatically(true); // 是否自動加載圖片
settings.setBlockNetworkImage(false);       // 禁止加載網絡圖片
settings.setBlockNetworkLoads(false);       // 禁止加載所有網絡資源

// 縮放(zoom)
settings.setSupportZoom(true);          // 是否支持縮放
settings.setBuiltInZoomControls(false); // 是否使用內置縮放機制
settings.setDisplayZoomControls(true);  // 是否顯示內置縮放控件

// 默認文本編碼，默認值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默認文字尺寸，默認值16，取值範圍1-72
settings.setDefaultFixedFontSize(16);   // 默認等寬字體尺寸，默認值16
settings.setMinimumFontSize(8);         // 最小文字尺寸，默認值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字邏輯尺寸，默認值 8
settings.setTextZoom(100);              // 文字縮放百分比，默認值 100

// 字體
settings.setStandardFontFamily("sans-serif");   // 標準字體，默認值 "sans-serif"
settings.setSerifFontFamily("serif");           // 襯線字體，默認值 "serif"
settings.setSansSerifFontFamily("sans-serif");  // 無襯線字體，默認值 "sans-serif"
settings.setFixedFontFamily("monospace");       // 等寬字體，默認值 "monospace"
settings.setCursiveFontFamily("cursive");       // 手寫體(草書)，默認值 "cursive"
settings.setFantasyFontFamily("fantasy");       // 幻想體，默認值 "fantasy"


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 用戶是否需要通過手勢播放媒體(不會自動播放)，默認值 true
    settings.setMediaPlaybackRequiresUserGesture(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上允許加載http和https混合的頁面(5.0以下默認允許，5.0+默認禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    // 是否在離開屏幕時光柵化(會增加內存消耗)，默認值 false
    settings.setOffscreenPreRaster(false);
}

if (isNetworkConnected(context)) {
    // 根據cache-control決定是否從網絡上取數據
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 沒網，離線加載，優先加載緩存(即使已經過期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

// deprecated
settings.setRenderPriority(WebSettings.RenderPriority.HIGH);
settings.setDatabasePath(context.getDir("database", Context.MODE_PRIVATE).getPath());
settings.setGeolocationDatabasePath(context.getFilesDir().getPath());

WebViewClient

// 攔截頁面加載，返回true表示宿主app攔截並處理了該url，否則返回false由當前WebView處理
// 此方法在API24被廢棄，不處理POST請求
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return false;
}

// 攔截頁面加載，返回true表示宿主app攔截並處理了該url，否則返回false由當前WebView處理
// 此方法添加於API24，不處理POST請求，可攔截處理子frame的非http請求
@TargetApi(Build.VERSION_CODES.N)
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    return shouldOverrideUrlLoading(view, request.getUrl().toString());
}

// 此方法廢棄於API21，調用於非UI線程
// 攔截資源請求並返回響應數據，返回null時WebView將繼續加載資源
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
    return null;
}

// 此方法添加於API21，調用於非UI線程
// 攔截資源請求並返回數據，返回null時WebView將繼續加載資源
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
    return shouldInterceptRequest(view, request.getUrl().toString());
}

// 頁面(url)開始加載
public void onPageStarted(WebView view, String url, Bitmap favicon) {
}

// 頁面(url)完成加載
public void onPageFinished(WebView view, String url) {
}

// 將要加載資源(url)
public void onLoadResource(WebView view, String url) {
}

// 這個回調添加於API23，僅用於主框架的導航
// 通知應用導航到之前頁面時，其遺留的WebView內容將不再被繪製。
// 這個回調可以用來決定哪些WebView可見內容能被安全地回收，以確保不顯示陳舊的內容
// 它最早被調用，以此保證WebView.onDraw不會繪製任何之前頁面的內容，隨後繪製背景色或需要加載的新內容。
// 當HTTP響應body已經開始加載並體現在DOM上將在隨後的繪製中可見時，這個方法會被調用。
// 這個回調發生在文檔加載的早期，因此它的資源(css,和圖像)可能不可用。
// 如果需要更細粒度的視圖更新，查看 postVisualStateCallback(long, WebView.VisualStateCallback).
// 請注意這上邊的所有條件也支持 postVisualStateCallback(long ,WebView.VisualStateCallback)
public void onPageCommitVisible(WebView view, String url) {
}

// 此方法廢棄於API23
// 主框架加載資源時出錯
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
}

// 此方法添加於API23
// 加載資源時出錯，通常意味着連接不到服務器
// 由於所有資源加載錯誤都會調用此方法，所以此方法應儘量邏輯簡單
@TargetApi(Build.VERSION_CODES.M)
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
    if (request.isForMainFrame()) {
        onReceivedError(view, error.getErrorCode(), error.getDescription().toString(), request.getUrl().toString());
    }
}

// 此方法添加於API23
// 在加載資源(iframe,image,js,css,ajax...)時收到了 HTTP 錯誤(狀態碼>=400)
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
}


// 是否重新提交表單，默認不重發
public void onFormResubmission(WebView view, Message dontResend, Message resend) {
    dontResend.sendToTarget();
}

// 通知應用可以將當前的url存儲在數據庫中，意味着當前的訪問url已經生效並被記錄在內核當中。
// 此方法在網頁加載過程中只會被調用一次，網頁前進後退並不會回調這個函數。
public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
}

// 加載資源時發生了一個SSL錯誤，應用必需響應(繼續請求或取消請求)
// 處理決策可能被緩存用於後續的請求，默認行爲是取消請求
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    handler.cancel();
}

// 此方法添加於API21，在UI線程被調用
// 處理SSL客戶端證書請求，必要的話可顯示一個UI來提供KEY。
// 有三種響應方式：proceed()/cancel()/ignore()，默認行爲是取消請求
// 如果調用proceed()或cancel()，Webview 將在內存中保存響應結果且對相同的"host:port"不會再次調用 onReceivedClientCertRequest
// 多數情況下，可通過KeyChain.choosePrivateKeyAlias啓動一個Activity供用戶選擇合適的私鑰
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onReceivedClientCertRequest(WebView view, ClientCertRequest request) {
    request.cancel();
}

// 處理HTTP認證請求，默認行爲是取消請求
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
    handler.cancel();
}

// 通知應用有個已授權賬號自動登陸了
public void onReceivedLoginRequest(WebView view, String realm, String account, String args) {
}
// 給應用一個機會處理按鍵事件
// 如果返回true，WebView不處理該事件，否則WebView會一直處理，默認返回false
public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
    return false;
}

// 處理未被WebView消費的按鍵事件
// WebView總是消費按鍵事件，除非是系統按鍵或shouldOverrideKeyEvent返回true
// 此方法在按鍵事件分派時被異步調用
public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
    super.onUnhandledKeyEvent(view, event);
}

// 通知應用頁面縮放係數變化
public void onScaleChanged(WebView view, float oldScale, float newScale) {
} 

WebChromeClient

// 獲得所有訪問歷史項目的列表，用於鏈接着色。
public void getVisitedHistory(ValueCallback<String[]> callback) {
}

// <video /> 控件在未播放時，會展示爲一張海報圖，HTML中可通過它的'poster'屬性來指定。
// 如果未指定'poster'屬性，則通過此方法提供一個默認的海報圖。
public Bitmap getDefaultVideoPoster() {
    return null;
}

// 當全屏的視頻正在緩衝時，此方法返回一個佔位視圖(比如旋轉的菊花)。
public View getVideoLoadingProgressView() {
    return null;
}

// 接收當前頁面的加載進度
public void onProgressChanged(WebView view, int newProgress) {
}

// 接收文檔標題
public void onReceivedTitle(WebView view, String title) {
}

// 接收圖標(favicon)
public void onReceivedIcon(WebView view, Bitmap icon) {
}

// Android中處理Touch Icon的方案
// http://droidyue.com/blog/2015/01/18/deal-with-touch-icon-in-android/index.html
public void onReceivedTouchIconUrl(WebView view, String url, boolean precomposed) {
}

// 通知應用當前頁進入了全屏模式，此時應用必須顯示一個包含網頁內容的自定義View
public void onShowCustomView(View view, CustomViewCallback callback) {
}

// 通知應用當前頁退出了全屏模式，此時應用必須隱藏之前顯示的自定義View
public void onHideCustomView() {
}


// 顯示一個alert對話框
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return false;
}

// 顯示一個confirm對話框
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
}

// 顯示一個prompt對話框
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}

// 顯示一個對話框讓用戶選擇是否離開當前頁面
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}


// 指定源的網頁內容在沒有設置權限狀態下嘗試使用地理位置API。
// 從API24開始，此方法只爲安全的源(https)調用，非安全的源會被自動拒絕
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
}

// 當前一個調用 onGeolocationPermissionsShowPrompt() 取消時，隱藏相關的UI。
public void onGeolocationPermissionsHidePrompt() {
}

// 通知應用打開新窗口
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
    return false;
}

// 通知應用關閉窗口
public void onCloseWindow(WebView window) {
}

// 請求獲取取焦點
public void onRequestFocus(WebView view) {
}

// 通知應用網頁內容申請訪問指定資源的權限(該權限未被授權或拒絕)
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequest(PermissionRequest request) {
    request.deny();
}

// 通知應用權限的申請被取消，隱藏相關的UI。
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequestCanceled(PermissionRequest request) {
}

// 爲'<input type="file" />'顯示文件選擇器，返回false使用默認處理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    return false;
}

// 接收JavaScript控制檯消息
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    return false;
} 

Webview 加載優化

• 使用本地資源替代
  可以 將一些資源文件放在本地的 asset s目錄, 然後重 寫WebViewClient 的 shouldInterceptRequest 方法，對訪問地址進行攔截，當 url 地址命中本地配置的url時，使用本地資源替代，否則就使用網絡上的資源。

mWebview.setWebViewClient(new WebViewClient() {   
     // 設置不用系統瀏覽器打開,
    @Override    
    public boolean shouldOverrideUrlLoading(WebView view, String url) {      
        view.loadUrl(url);     
        return true;    
    }   
         
    @Override    
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {      // 如果命中本地資源, 使用本地資源替代      
        if (mDataHelper.hasLocalResource(url)){         
             WebResourceResponse response = mDataHelper.getReplacedWebResourceResponse(getApplicationContext(), url);          
            if (response !=null) {              
                return response;
            }      
        }      
        return super.shouldInterceptRequest(view, url);    
    }   
    
    @TargetApi(VERSION_CODES.LOLLIPOP)@Override    
    public WebResourceResponse shouldInterceptRequest(WebView view,WebResourceRequest request) {      
        String url = request.getUrl().toString();      
        if (mDataHelper.hasLocalResource(url)) {         
            WebResourceResponse response =  mDataHelper.getReplacedWebResourceResponse(getApplicationContext(), url);          
            if (response !=null) {              
                return response;          
            }      
        }      
        return super.shouldInterceptRequest(view, request);    
    }
}); 

• WebView初始化慢，可以在初始化同時先請求數據，讓後端和網絡不要閒着。

• 後端處理慢，可以讓服務器分trunk輸出，在後端計算的同時前端也加載網絡靜態資源。

• 腳本執行慢，就讓腳本在最後運行，不阻塞頁面解析。

• 同時，合理的預加載、預緩存可以讓加載速度的瓶頸更小。

• WebView初始化慢，就隨時初始化好一個WebView待用。

• DNS和鏈接慢，想辦法複用客戶端使用的域名和鏈接。

• 腳本執行慢，可以把框架代碼拆分出來，在請求頁面之前就執行好。

內存泄漏

直接 new WebView 並傳入 application context 代替在 XML 裏面聲明以防止 activity 引用被濫用，能解決90+%的 WebView 內存泄漏。

vWeb =  new WebView(getContext().getApplicationContext());
container.addView(vWeb);

銷燬 WebView

if (vWeb != null) {
    vWeb.setWebViewClient(null);
    vWeb.setWebChromeClient(null);
    vWeb.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
    vWeb.clearHistory();

    ((ViewGroup) vWeb.getParent()).removeView(vWeb);
    vWeb.destroy();
    vWeb = null;
}