csfchh

Android如何设计一个H5容器

APP端使用WebView的场景主要是加载H5页面、富文本展示和编辑、图表库（echart）等。当业务对APP动态化有相应需求时，H5作为一个老牌跨平台技术，是最常用的动态化技术之一。本文对WebView的技术需求和使用场景进行了整理，其中大部分是本人工作中遇到过的，部分是在查阅资料过程中发现的，希望对今后的开发有所帮助。

先来谈一谈H5容器的设计目标：

良好的js与原生通讯支持：支持自定义通讯接口；
性能尽可能好，加载速度尽量快：H5本地模版和webview缓存；
可配置，扩展性好：默认配置合理，满足多数场景需求，同时支持丰富的自定义配置；
用户交互的全面支持：状态展示（loading/error/success）、权限申请、文件选择、大图查看、视频全屏、内容复制粘贴、输入框键盘等等；

本文将围绕这些目标展开，结合WebView的基本用法介绍，力求尽量全面地了解WebView的使用。

WebView基本用法

WebView

查看android api 27及之前版本的WebView源码，发现出于线程安全的考虑，WebView的公开接口内部都做了android.webkit.WebView#checkThread处理，以确保所有相关接口的调用都在同一个线程中。api 28及之后WebView继承MockView成为傀儡类，虽然无法直接看到内部逻辑，但是有理由相信这个准则还是不变的，所以推荐在调用WebView相关接口时要注意在主线程调用。

生命周期相关接口

初始化：

mWebView = new WebView(getContext());
// 可选：自定义配置
WebSettings webSettings = mWebView.getSettings();
// 可选：自定义WebViewClient
mWebView.setWebViewClient(new WebViewClient(){...});
// 可选：自定义WebChromeClient
mWebView.setWebChromeClient(new WebChromeClient(){...});
// 可选：添加JS回调
mWebView.addJavascriptInterface(new Object(){ @JavascriptInterface...}, namespace);

前台：

    @Override
    public void onResume() {
    	// 继续被中断的操作
        mWebView.onResume();
        super.onResume();
    }

后台：

    @Override
    public void onPause() {
        super.onPause();
        // Pauses any extra processing associated with this WebView and its 
        // associated DOM, plugins, JavaScript etc. For example, if this 
        // WebView is taken offscreen, this could be called to reduce 
        // unnecessary CPU or network traffic. When this WebView is again 
        // "active", call onResume(). Note that this differs from pauseTimers(),
        // which affects all WebViews.
        mWebView.onPause();
    }

销毁：

// 必须，防止内存泄漏，参见：https://www.jianshu.com/p/eada9b652d99
((ViewGroup) mWebView.getParent()).removeView(this);
// 可选
mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
// 可选，停止JS加载，如果前面已经调用了onPause则这里不用
mWebView.stopLoading();
// 可选，退出时调用此方法，移除绑定的服务，否则某些特定系统会报错
mWebView.getSettings().setJavaScriptEnabled(false);
// 可选
mWebView.clearHistory();
mWebView.clearView();
mWebView.removeAllViews();
// 必须，需要在最后调用，此方法调用不能再调用mWebView的任何方法
mWebView.destroy();

加载数据

// 加载指定url，url可以是以下：
// 1. [http_url]：比如http://www.baidu.com
// 2. [assets_url]：比如file:///android_asset/content.html
// 3. [file_url]：本地文件绝对路径
// 4. [js_url]：javascript:getText()，详见原生调用JS
// 5. ["about:blank"]：空页面，用于清空webview内容并释放资源
mWebView.loadUrl("url");
// 加载指定http url，并添加自定义请求头
mWebView.loadUrl("url", Collections.<String, String>emptyMap());

// 使用post请求加载指定url，bytes为urlencode过的数据，将作为post请求body，
// 如果url非http地址，则等同于loadUrl("url")
mWebView.postUrl("url", bytes);

// 加载HTML文本
// 注意data须经UrlEncoder进行编码，不能出现英文字符：’#’, ‘%’, ‘\’ , ‘?’ 这四个字符
mWebView.loadData("data","mimeType","encoding");
// 加载HTML文本，data没有上面的限制，因此使用更多
// String baseUrl：基准URL，不需要可以传null。如果data中的url是相对地址，则就会加上基准url来拼接出完整的地址
// String mimeType:MIME类型，通常是“text/html”
// String encoding：编码方式
// String historyUrl：插入历史记录的值，不需要传Null
mWebView.loadDataWithBaseURL("baseUrl","data","mimeType","encoding","historyUrl");

// 停止加载
mWebView.stopLoading();

// 重新加载当前URL
mWebView.reload();

loadData()与loadDataWithBaseURL()
通过loadUrl()来加载本地页面和在线地址的方式需要很长的加载时间，而这两个方法不是用来加载整个页面文件的，而是用来加载一段代码片。比如可以先通过http将网页HTML数据从服务器下载回来，在通过这两个方法就可以很快把页面加载出来，没有很长的访问网络CDN解析等时间。两者比较推荐使用后者，虽然loadData的历史记录不需要我们自己来实现，但在使用时，加载上后者比前者快一到两倍。另外loadData不能加载图片，而loadDataWithBaseURL是可以加载图片的。
loadDataWithBaseURL()
loadDataWithBaseURL它本身并不会向历史记录中存储数据，要想实现历史记录，需要我们自己来实现；有关历史记录的实现方式是比较复杂的，历史记录是以Key/value的方式存储在一个historyList里的，当前进后退时，会用Key来取出对应的value值来加载进webview中。而Key就是这里的baseUrl,Value就是这里的historyUrl；history所指向的必须是一个页面，并且页面存在于SD卡中或程序中（assets）；

想要了解更多webview支持的url类型，参见：android.webkit.URLUtil

页面导航

// 获取当前页面URL
String url = mWebView.getUrl();
// 获取当前初始实际加载的URL，比如重定向后的URL
String originalUrl = mWebView.getOriginalUrl();
boolean b = mWebView.canGoBack();
mWebView.canGoBackOrForward(steps);
boolean b1 = mWebView.canGoForward();
mWebView.goBack();
mWebView.goForward();
mWebView.goBackOrForward(steps);

对于常规的多页H5应用，那么上述webview接口已经可以实现activity对webview页面的管控了，但是目前很多H5应用是单页应用，回退操作需要APP端和H5端协调好接口，比如JS仿照webview的已有接口：canGoBack()和goBack()进行实现，由原生APP端进行调用。

其他接口

// 取消已经选中的webview里的文字，需要搭配View#clearFocus()使用
mWebView.clearMatches();

mWebView.clearFormData();

mWebView.clearHistory();

mWebView.clearSslPreferences();

// 已废弃，情况网页内容，显示空白页
mWebView.clearView();

// 这里比较难理解的可能是realm，它是指服务端配置用户认证配置中的AuthName（Apache httpd http://httpd.apache.org/docs/2.0/howto/auth.html）
mWebView.setHttpAuthUsernamePassword("host","realm","username","password");
String[] usernamePassword = mWebView.getHttpAuthUsernamePassword("host","realm");

SslCertificate certificate = mWebView.getCertificate();
mWebView.setCertificate(certificate);

mWebView.setNetworkAvailable(true);

// 获取html内容宽高
int contentHeight = mWebView.getContentHeight();
int contentWidth = mWebView.getContentWidth();

Tricks

浏览器用户认证

setHttpAuthUsernamePassword(“host”,“realm”,“username”,“password”)使用场合
一个需要用户认证的网址：http://api.test.com/userinfo/vid?=1234
使用curl访问方式：

curl -u username:password http://api.test.com/userinfo/vid?=1234

使用webview访问：

// 错误，无法访问
// realm不能为空，该参数可以从：
// 1. 到服务器配置>>用户认证配置获取
// 2. 在WebViewClient#onReceivedHttpAuthRequest回调中，也有realm参数
mWebView.setHttpAuthUsernamePassword("api.test.com", "", "username", "password");
mWebView.loadUrl("http://api.test.com/userinfo/vid?=1234");

或使用webview WebViewClient回调：

webview.setWebViewClient(new MyWebViewClient ());

private class MyWebViewClient extends WebViewClient {
    @Override
    public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
    	// 这里正确的做法是弹窗对话框让用户输入用户名密码
        // 如果直接调用接口，则必须使用正确的用户名密码，否则webview会一直发送请求
        // 当出现请求错误时，可以尝试使用mWebView.stopLoading()来终止retry行为
        handler.proceed("username", "password");
        
    }
}

或将用户名密码拼接到url进行访问，类似curl：

mWebView.loadUrl("http://username:[email protected]/userinfo/vid?=1234");

参考资料：Using WebView setHttpAuthUsernamePassword?

WebSettings

API

void setSupportZoom(boolean support)

Sets whether the WebView should support zooming using its on-screen zoom controls and gestures. The particular zoom mechanisms that should be used can be set with setBuiltInZoomControls. This setting does not affect zooming performed using the WebView.zoomIn() and WebView.zoomOut() methods. The default is true.

Params:
support – whether the WebView should support zoom

void setMediaPlaybackRequiresUserGesture(boolean require)

Sets whether the WebView requires a user gesture to play media. The default is true.

Params:
require – whether the WebView requires a user gesture to play media

void setBuiltInZoomControls(boolean enabled)

Sets whether the WebView should use its built-in zoom mechanisms. The built-in zoom mechanisms comprise on-screen zoom controls, which are displayed over the WebView’s content, and the use of a pinch gesture to control zooming. Whether or not these on-screen controls are displayed can be set with setDisplayZoomControls. The default is false.
The built-in mechanisms are the only currently supported zoom mechanisms, so it is recommended that this setting is always enabled.

Params:
enabled – whether the WebView should use its built-in zoom mechanisms

void setDisplayZoomControls(boolean enabled)

Sets whether the WebView should display on-screen zoom controls when using the built-in zoom mechanisms. See setBuiltInZoomControls. The default is true.

Params:
enabled – whether the WebView should display on-screen zoom controls

void setAllowFileAccess(boolean allow)

Enables or disables file access within WebView. File access is enabled by default. Note that this enables or disables file system access only. Assets and resources are still accessible using file:///android_asset and file:///android_res.

void setAllowContentAccess(boolean allow)

Enables or disables content URL access within WebView. Content URL access allows WebView to load content from a content provider installed in the system. The default is enabled.

void setAllowUniversalAccessFromFileURLs(boolean flag)

Sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from any origin. This includes access to content from other file scheme URLs. See setAllowFileAccessFromFileURLs. To enable the most restrictive, and therefore secure policy, this setting should be disabled. Note that this setting affects only JavaScript access to file scheme resources. Other access to such resources, for example, from image HTML elements, is unaffected. To prevent possible violation of same domain policy on android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH and earlier devices, you should explicitly set this value to false.
The default value is true for API level android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1 and below, and false for API level android.os.Build.VERSION_CODES.JELLY_BEAN and above.

Params:
flag – whether JavaScript running in the context of a file scheme URL should be allowed to access content from any origin

void setLoadsImagesAutomatically(boolean flag)

Sets whether the WebView should load image resources. Note that this method controls loading of all images, including those embedded using the data URI scheme. Use setBlockNetworkImage to control loading only of images specified using network URI schemes. Note that if the value of this setting is changed from false to true, all images resources referenced by content currently displayed by the WebView are loaded automatically. The default is true.

Params:
flag – whether the WebView should load image resources

void setBlockNetworkImage(boolean flag)

Sets whether the WebView should not load image resources from the network (resources accessed via http and https URI schemes). Note that this method has no effect unless getLoadsImagesAutomatically returns true. Also note that disabling all network loads using setBlockNetworkLoads will also prevent network images from loading, even if this flag is set to false. When the value of this setting is changed from true to false, network images resources referenced by content currently displayed by the WebView are fetched automatically. The default is false.

Params:
flag – whether the WebView should not load image resources from the network

void setBlockNetworkLoads(boolean flag)

Sets whether the WebView should not load resources from the network. Use setBlockNetworkImage to only avoid loading image resources. Note that if the value of this setting is changed from true to false, network resources referenced by content currently displayed by the WebView are not fetched until WebView.reload is called. If the application does not have the android.Manifest.permission.INTERNET permission, attempts to set a value of false will cause a SecurityException to be thrown. The default value is false if the application has the android.Manifest.permission.INTERNET permission, otherwise it is true.

Params:
flag – whether the WebView should not load any resources from the network

void setLoadWithOverviewMode(boolean overview)

Sets whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width. This setting is taken into account when the content width is greater than the width of the WebView control, for example, when getUseWideViewPort is enabled. The default is false.

void setSaveFormData(boolean save)

Sets whether the WebView should save form data. The default is true.

void setTextZoom(int textZoom)

Sets the text zoom of the page in percent. The default is 100.

void setAcceptThirdPartyCookies(boolean accept)

Sets policy for third party cookies. Developers should access this via CookieManager.setShouldAcceptThirdPartyCookies.

void setUseWideViewPort(boolean use)

Sets whether the WebView should enable support for the “viewport” HTML meta tag or should use a wide viewport. When the value of the setting is false, the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is true and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used.

Params:
use – whether to enable support for the viewport meta tag

void setSupportMultipleWindows(boolean support)

Sets whether the WebView whether supports multiple windows. If set to true, WebChromeClient.onCreateWindow must be implemented by the host application. The default is false.

Params:
support – whether to suport multiple windows

void setJavaScriptCanOpenWindowsAutomatically(boolean flag)

Tells JavaScript to open windows automatically. This applies to the JavaScript function window.open(). The default is false.

Params:
flag – true if JavaScript can open windows automatically

void setLayoutAlgorithm(LayoutAlgorithm l)

Sets the underlying layout algorithm. This will cause a relayout of the WebView. The default is WebSettings.LayoutAlgorithm.NARROW_COLUMNS.

Params:
l – the layout algorithm to use, as a WebSettings.LayoutAlgorithm value

void setStandardFontFamily(String font)

Sets the standard font family name. The default is “sans-serif”.