Android Webview优化及与Js交互

在做的一个项目里主要是webview加载HTML页面，移动端工作量不多，主要是webview的优化问题，虽说看似很简单，但仍遇到了几个令人头疼的问题。
问题解决及优化之路主要经历了以下几个过程：

1、第一次打开webview耗时过长

刚开始在做webview加载url时，发现首次打开页面所耗时长比之后再打开时多了很多。
这是因为webview从创建到加载url需要时间而且首次加载没有缓存。所以最初解决办法是提前创建一个全局webview，供所有页面使用，我是在application初始化时就创建了webview，也确实解决了第一次打开耗时过长问题。

2、H5页面select选择框无法正常使用

在解决第一个问题把webview放在application中后，又出现了新的问题，H5页面里select组件在Android中不能调起，错误原因是Dialog在show的时候必须要有一个activity作为窗口载体，而我的webview是有application创建，并没有任何activity作为载体，所以我又将webview放回activity中创建，发现select选择框果然工作正常了。

3、Webview资源预加载

为了进一步优化加载H5页面耗时过长，数据流量多的问题，我做了资源预加载拦截配置，即将html页面使用到的一些静态资源提前放在Android本地，编译进apk里，在加载页面时，拦截相关的资源，进行替换，节省加载时间和加载的数据量。

public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request){}

其中，可以将js,css,图片等资源放置android新建assets文件夹下，拦截到对应url请求后，
用本地数据返回。

return new WebResourceResponse(mimeType, "utf-8", getAssets().open(resourceName));

4、Android webview 与JS交互

因为项目里HTML页面不仅仅是显示效果，还需要和Android本地有一些互动效果或数据交互。所以又涉及到js与Android交互问题。

一、是js调用Android本地代码：

1）先允许与js交互
webSettings.setJavaScriptEnabled(true);
2）添加交互接口
mWebView.addJavascriptInterface(new AndroidtoJs(), “android”);//用this也可以 存在安全隐患 漏洞
//为了防止WebView调用我们不想被它调用的函数，所以我们需要单独为WebView交互定义一个类，让它只执行这个类里面的函数
3）写js需要调用的android代码

 private class AndroidtoJs {
      @android.webkit.JavascriptInterface
      public void finishActivity() {
         finish();
      }
      @android.webkit.JavascriptInterface
      public String toJs() {
          return "123456";
      }   }

4）js端调用
关闭activity例子
function finishActivity(){
window.android.finishActivity();//此即上面finishActivity()
}

二、还有Android调用js代码：

1）js代码(带参例子)
function putData(key,value){
window.localStorage.setItem(key,value);
}

2）Android端调用
此例子是调用带参的方法
mWebView.evaluateJavascript(“javascript:putData(‘serverUrl’,’http://192.168.1.5:8089/‘)”, new ValueCallback() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
toast(value);
}
});

5、js与android互调问题,关于localstorage

Webview有多种缓存机制，其中有种Dom Storage 缓存机制，DOM Storage 分为 sessionStorage & localStorage； 二者使用方法基本相同，区别在于作用范围不同：
a. sessionStorage：具备临时性，即存储与页面相关的数据，它在页面关闭后无法使用
b. localStorage：具备持久性，即保存的数据在页面关闭后也可以使用。
问题：android调js,并传送数据 使用localstorage保存。

我们原来的需求是android将一些数据保存在localstorage中，然后js调用获取localstorage中数据。其中，要使用js方法保存数据，如下。
javascript:putData(‘serverUrl’,’http://192.168.1.5:8089/‘)
遇到的问题及注意事项：
1) webview setting需要设置文件缓存等

webSettings.setDomStorageEnabled(true);
webSettings.setAppCacheMaxSize(1024 * 1024 * 8);
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
webSettings.setAppCachePath(appCachePath);
webSettings.setAppCacheEnabled(true);
webSettings.setAllowFileAccess(true);

2) 刚开始在js加载之前onPageStarted()中调用，发现返回null，这是因为这个页面js还没加载。
3) 在页面onPageFinished（）中调用，发现所有资源已加载完，对该需求此时已没意义
所以，这个方法主动调用js并传入数据让js获取，受到js加载时机等因素问题会比较受限，遂放弃。
后来转念一想，改为js主动调用android代码获取想要的数据，实现很简单而且不用考虑js是否已加载，资源加载顺序等问题，需要时即可从android端获取数据。所以有时不能一味根据别人要求完成功能实现，要理清需求，理顺逻辑，才能避免无谓的歪路。

补充调试过程中遇到的几个相关问题：
1、html页面中alert()在android端显示，需要写上

mWebView.setWebChromeClient(new WebChromeClient(){
   @Override
   public boolean onJsAlert(WebView view, String url,String message, JsResult result) {
      toast("message:"+message + "  JsResult" + result.toString());
      return super.onJsAlert(view, url, message, result);
   }
});

2、关于webview缓存
调试时我改动了H5页面，移动端却没有显示出来改动，是因为我为了加快webview加载速度，在webview设置里，对缓存设置里加载使用缓存，而在调试代码过程中，没有清理缓存，所以无论我怎么修改H5页面，移动端始终没有效果，耗费了不少时间和精力，后来加载新页面，才发现是因为缓存，没有实时替换成修改过的HTML页面，而且即使退出应用或重新部署程序也不会自动清理缓存，只有完全手动卸载再安装，才会替换新修改后的页面。所以要在代码里注意添加清理缓存代码。
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);