Android WebView填坑記錄

前言

在應用程序開發過程中，經常會采用webview來展現某些界面，這樣就可以不受發布版本控制，實時更新，遇到問題可以快速修復。

但是在Android開發中，由於Android版本分化嚴重，每一個版本針對webview都有部分更改，因此在開發過程中會遇到各種各樣的坑，因此在此總結一下在開發過程中遇到的一些坑！

樣例

這裡不是講解怎麼進行webview開發，而是只羅列其中遇到的一些坑！為了展示這些問題，我們還是寫一個樣例來進行展開。

樣例代碼：

/**
 * WebView demo
 */
public class WebViewActivity extends AppCompatActivity {

    public static void start(Context context) {
        Intent intent = new Intent();
        intent.setClass(context, WebViewActivity.class);
        context.startActivity(intent);
    }

    private static final String TAG = "WebViewActivity";

    public static final String URL = "http://www.163.com";

    private static final int REQUEST_CODE_GET_LOCAL_FILE = 0;
    private static final int REQUEST_CODE_GET_LOCAL_FILE_NEW = 1;

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        findViews();
        initWebView();
    }

    /**
     * 查找界面view
     */
    private void findViews() {
        webView = (WebView) findViewById(R.id.web_view);
    }

    /**
     * 初始化webview參數
     */
    private void initWebView() {
        initWebSetting();
        setAcceptThirdPartyCookies();
        initWebClient();
        loadUrl();
    }

    /**
     * 加載地址
     */
    private void loadUrl() {
        webView.loadUrl(URL);
    }

    /**
     * 設置WebSetting
     */
    private void initWebSetting() {
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        webSettings.setUserAgentString(webSettings.getUserAgentString() + " VersionCode/" + InstallUtil
                .getVersionCode(this));
        webSettings.setAppCacheMaxSize(1024 * 1024 * 8);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setSupportZoom(true);
        webSettings.setGeolocationEnabled(true);
        webSettings.setDatabaseEnabled(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
    }

    /**
     * 設置跨域cookie讀取
     */
    public final void setAcceptThirdPartyCookies() {
        //target 23 default false, so manual set true
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
        }
    }

    /**
     * 設置client
     */
    private void initWebClient() {
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                Log.e(TAG, "onProgressChanged newProgress=" + newProgress);
            }

            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, 
                                             FileChooserParams fileChooserParams) {
                Intent intent = fileChooserParams.createIntent();
                try {
                    startActivityForResult(intent, REQUEST_CODE_GET_LOCAL_FILE_NEW);
                } catch (Exception e) {
                    ToastUtil.showLong(getString(R.string.choose_fail));
                    return false;
                }
                return true;
            }

            //
            // FILE UPLOAD <3.0
            //
            public void openFileChooser(ValueCallback uploadFile) {
                chooseFile(uploadFile, null, null);
            }

            public void openFileChooser(ValueCallback uploadFile, String acceptType) {
                chooseFile(uploadFile, acceptType, null);
            }

            /**
             * 4.x
             * @param uploadFile
             * @param acceptType
             * @param capture
             */
            public void openFileChooser(ValueCallback uploadFile, String acceptType, String capture) {
                chooseFile(uploadFile, acceptType, capture);
            }
        });
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.e(TAG, "onPageStarted");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.e(TAG, "onPageFinished");
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.e(TAG, "onReceivedError");
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
                Log.e(TAG, "onReceivedSslError");
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e(TAG, "shouldOverrideUrlLoading url=" + url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
    }

    private ValueCallback uploadFileNew;
    private ValueCallback uploadFile;

    /**
     * 文件選擇
     *
     * @param uploadFile
     * @param acceptType
     * @param capture
     */
    private void chooseFile(ValueCallback uploadFile, String acceptType, String capture) {
        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        if (TextUtils.isEmpty(acceptType)) {
            acceptType = "*/*";
        }
        intent.setType(acceptType);

        this.uploadFile = uploadFile;

        try {
            startActivityForResult(Intent.createChooser(intent, capture), REQUEST_CODE_GET_LOCAL_FILE);
        } catch (Throwable tr) {
            tr.printStackTrace();
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case REQUEST_CODE_GET_LOCAL_FILE:
                if (uploadFile != null) {
                    uploadFile.onReceiveValue((resultCode == Activity.RESULT_OK && data != null) ? data.getData() : 
                            null);
                    uploadFile = null;
                }
                break;
            case REQUEST_CODE_GET_LOCAL_FILE_NEW:
                if (uploadFileNew != null) {
                    uploadFileNew.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
                    uploadFileNew = null;
                }
                break;
        }
    }
}

布局代碼

填坑

1，回調不成對

在WebView加載地址時，在加載過程中回調次數不一定相同，比如這裡我們我們加載http://www.163.com。

E/WebViewActivity: onProgressChanged newProgress=10
E/WebViewActivity: onPageStarted
E/WebViewActivity: shouldOverrideUrlLoading url=http://3g.163.com/
E/WebViewActivity: onPageStarted
E/WebViewActivity: onPageStarted
E/WebViewActivity: shouldOverrideUrlLoading url=http://3g.163.com/touch/
E/WebViewActivity: onProgressChanged newProgress=50
E/WebViewActivity: onPageFinished
E/WebViewActivity: onProgressChanged newProgress=52
E/WebViewActivity: onProgressChanged newProgress=90
E/WebViewActivity: onProgressChanged newProgress=95
E/WebViewActivity: onProgressChanged newProgress=100
E/WebViewActivity: onPageFinished

從上面的日志中可以看到onPageStarted與onPageFinished次數不一致，因此如果你在start中進行進度條加載處理，finish中結束，會導致進度條一直不消失。因此可以在onProgressChanged進行處理。當newProgress為100時表示頁面加載完成。

2，文件選擇回調函數更改

如果你是web頁面開發人員，如果要選取本地文件，可以采用input標簽，如下一個簡單的html頁面：

附錄
如果你不是專業的web開發人員，但是又想進行web頁面調試，可以自己搭建一個web服務，如果你采用的是MAC可以采用如下方案進行web服務搭建

1.用node裝一個http-server

2.brew install node

3.npm install -g http-server 安裝

4.在一個目錄下 http-server啟動就是一個簡單http服務裡 port 8080

上面的代碼加載後效果如下：

很簡單吧！是不是想說so easy！！！那我們就點擊一下選擇文件吧！

咦沒效果
換手機，好，有效果
再換，咦，又沒有效果<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjwvYmxvY2txdW90ZT4NCjxwPsrHsrvKx7jQvvW63Nelv/Gjv9XiysfTydPaQW5kcm9pZLXEsrvNrLDmsb6jrFdlYlZpZXe1xLvYtfe6r8r9tryyu9K71sKho9T1w7S94r721eK49s7KzOKjv7/J0tS4tNC0srvNrLXEu9i197qvyv2jrNXiwO/W99Kq09DS1M/Cy8S49rvYtfe6r8r9o6y31rHwtKbA7bK7zay1xLDmsb6jujwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) { Intent intent = fileChooserParams.createIntent(); try { startActivityForResult(intent, REQUEST_CODE_GET_LOCAL_FILE_NEW); } catch (Exception e) { ToastUtil.showLong(getString(R.string.choose_fail)); return false; } return true; } // // FILE UPLOAD <3.0 // public void openFileChooser(ValueCallback uploadFile) { chooseFile(uploadFile, null, null); } public void openFileChooser(ValueCallback uploadFile, String acceptType) { chooseFile(uploadFile, acceptType, null); } /** * 4.x * @param uploadFile * @param acceptType * @param capture */ public void openFileChooser(ValueCallback uploadFile, String acceptType, String capture) { chooseFile(uploadFile, acceptType, capture); }

復寫了上述四個函數，同時記得onActivityResult進行返回結果處理。就算是這樣，我也不敢保證所有的手機都能正確的進行處理。
剛才在html中是否看到了一個一段document.addEventListener(‘JSBridgeReady’,a)這樣的代碼。這裡是想說給出另外一種解決方案，可以采用JSBridge方式進行web頁面與native頁面交互，這樣就可以屏蔽版本中間的差異。

3，跨域cookie讀取

什麼是跨域，簡單的說就是不同的域名，我們都知道在pc上我們用浏覽器訪問網址，不同的網址都會在本地存儲一些cookie信息，這樣就可以實現比如自動登錄等功能，在pc上不同域名是不能相互讀取其他域下的cookie信息的（非web專業開發人員，如果理解有誤，歡迎指出）。

但是在Android上在api 23之前，是可以跨域讀取cookie的，比如A域寫入一個userId的cookie，B域可以讀取該值。但是在23時，系統將該值設置成了false，不再讓跨域讀取了。如果你的應用有跨域讀取需求，怎麼辦？可以采用如下方式進行開啟：

    /**
     * 設置跨域cookie讀取
     */
    public final void setAcceptThirdPartyCookies() {
        //target 23 default false, so manual set true
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
        }
    }

這裡我們來看看setAcceptThirdPartyCookies的注釋：

Sets whether the {@link WebView} should allow third party cookies to be set.
Allowing third party cookies is a per WebView policy and can be set
differently on different WebView instances.

Apps that target {@link android.os.Build.VERSION_CODES#KITKAT} or below
default to allowing third party cookies. Apps targeting
{@link android.os.Build.VERSION_CODES#LOLLIPOP} or later default to disallowing
third party cookies.

4，http/https混合加載

在現階段，很多網站都改成了https進行訪問，https可以提升訪問網站的安全性，防止信息被竊取，如果所有的網頁都是https且網頁內的鏈接也是都是https，那就沒有混合加載的問題了。但是很多資源現階段還沒有改變成https訪問，往往頁面都嵌入了http的鏈接。這種混合網頁如果不進行處理，直接加載是會出現錯誤的。怎麼解決這個問題？

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

這也是一個分版本的函數，在api 23之前，默認是可以混合加載的，但是在23時，默認值改成了MIXED_CONTENT_NEVER_ALLOW，因此如果你有混合加載的需求，設置setMixedContentMode為MIXED_CONTENT_ALWAYS_ALLOW。

5，花屏

WebView如果開啟了硬件加速，多次打開，會導致界面花屏，或者界面繪制有殘留。這個在5.0剛出來的時候發生過多次，但是當時忘記截圖了。當時也沒有打算要把這些給記錄下來。這裡我已經復現不了了。如果你遇到了。關閉硬件加速就好了。

6，資源釋放

這裡我們先截取幾張圖來看看加載前與加載後webview內存的占用：
加載之前：

加載之後：

退出頁面：

可以看到內存蹭蹭蹭的就上去了。就算退出去了也沒有減少多少，因此這裡必須手動進行資源釋放，可以調用如下代碼：

@Override
protected void onDestroy() {
    super.onDestroy();
    if (webView != null) {
        root.removeView(webView);
        webView.removeAllViews();
        webView.destroy();
    }
}

也可以采用在界面中動態創建webview，之後add到頁面中，甚至更有人會為該頁面單獨設置一個進程，之後退出後會調用exit函數進行資源釋放。這裡可以根據需求來進行設置。

總結

WebView有這樣或者那樣的坑。這裡只是大致羅列自己遇到的一些，在知乎上也看到一個專門講WebView坑的查看鏈接。大家可以去看看，有什麼新的發現也可以進行探討。