第十一章 WebView

端木阳荣

2023-12-01

WebView

Hybird 开发

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
hybrid开发其实就是在App开发过程中既使用到了web（H5）开发技术也使用到了native开发技术，通过这两种技术混合实现的App就是我们通常说的hybrid app，而通过这两种技术混合开发就是hybrid开发。

为何需要hybird开发

使用Native开发的方式人员要求高，只是一个简单的功能就需要IOS程序员和Android程序员各自完成；
使用Native开发的方式版本迭代周期慢，每次完成版本升级之后都需要上传到App Store并审核，升级，重新安装等，升级成本高；
使用hybrid开发的方式简单方便，同一套代码既可以在IOS平台使用，也可以在Android平台使用，提高了开发效率与代码的可维护性；
使用hybrid开发的方式升级简单方便，只需要服务器端升级一下就好了，对用户而言完全是透明了，免去了Native升级中的种种不便；

通过对比可以发现hybrid开发方式现对于native实现主要的优势就是更新版本快，代码维护方便，当然了这两个优点也是我们推崇使用hybrid开发app的主要因素。

Android中如何实现Bybird开发

有两种方案：

使用第三方hybrid框架（集成度高，不容易定制化处理）
自己使用webview加载（定制化程度高，问题可控，但是相对与第三方框架集成度不够高）

WebView 是什么 & 作用 & 内核

简介

WebView是一个基于webkit引擎、展现web页面的控件。

Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。

显示和渲染Web页面
直接加载url
直接使用html文件（网络上或本地assets中）作布局
使用JavaScript交互调用H5和Native

WebView 基本使用

前提：添加网络权限

<uses-permission android:name="android.permission.INTERNET"/>

WebSettings & WebViewClient & WebChromeClient

WebSetting
对WebView进行配置和管理

WebView webView = new WebView(this)
WebView webview = (WebView) findViewById(R.id.webView1);

//声明WebSettings子类
WebSettings webSettings = webView.getSettings();

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webSettings.setJavaScriptEnabled(true);  

//支持插件
webSettings.setPluginsEnabled(true); 

//设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

//缩放操作
webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

//其他细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
webSettings.setAllowFileAccess(true); //设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

常用：设置WebView缓存
当加载 html 页面时，WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
请求的 URL记录保存在 WebViewCache.db，而 URL的内容是保存在 WebViewCache 文件夹下

	//优先使用缓存: 
    WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
        //缓存模式如下：
        //LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
        //LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
        //LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
        //LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

	//不使用缓存: 
	WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

	// 结合使用（离线加载）
	if (NetStatusUtil.isConnected(getApplicationContext())) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根据cache-control决定是否从网络上取数据。
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网，则从本地获取，即离线加载
}

WebViewClient
处理各种通知 & 请求事件

  Webview webview = (WebView) findViewById(R.id.webView1);

   webView.loadUrl("http://www.google.com/");	// 加载一个网页
   webView.loadUrl("file:///android_asset/test.html");	// 加载apk包中的html页面
   webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");	// 加载手机本地的html页面

    webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          // shouldOverrideUrlLoading()方法，使得打开网页时不调用系统浏览器， 而是在本WebView中显示,在网页上的所有加载都经过这个方法
      return true;
      }
	  @Override
      public void  onPageStarted(WebView view, String url, Bitmap favicon) {
         // 开始加载页面调用的，我们可以设定一个loading的页面，告诉用户程序在等待网络响应。
      }
      @Override
      public void onPageFinished(WebView view, String url) {
         // 在页面加载结束时调用。我们可以关闭loading 条，切换程序动作。
      }
@Override
      public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){
switch(errorCode){
		// App里面使用webview控件的时候遇到了诸如404这类的错误的时候，若也显示浏览器里面的那种错误提示页面就显得很丑陋了
		// 那么这个时候我们的app就需要加载一个本地的错误提示页面
		// 步骤1：写一个html文件（error_handle.html），用于出错时展示给用户看的提示页面
		// 步骤2：将该html文件放置到代码根目录的assets文件夹下
		// 步骤3：复写WebViewClient的onRecievedError方法
                case HttpStatus.SC_NOT_FOUND:
                //该方法传回了错误码，根据错误类型可以进行不同的错误分类处理
                    view.loadUrl("file:///android_assets/error_handle.html");
                    break;
                }
            }
  });

WebChromeClient
辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等等。

webview.setWebChromeClient(new WebChromeClient(){
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
      // 获得网页的加载进度并显示
          if (newProgress < 100) {
              String progress = newProgress + "%";
              progress.setText(progress);
            } else {}
        }
        @Override
    	public void onReceivedTitle(WebView view, String title) {
    	// 获取Web页中的标题
       		titleview.setText(title)；
    	}
    });

使用案例

（1）需求
实现显示“www.baidu.com”、获取其标题、提示加载开始 & 结束和获取加载进度
（2）实现
步骤1：添加访问网络权限
AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

步骤2：主布局
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout>
   <!-- 获取网站的标题-->
    <TextView android:id="@+id/title"/>

    <!--开始加载提示-->
    <TextView android:id="@+id/text_beginLoading"/>

    <!--获取加载进度-->
    <TextView android:id="@+id/text_Loading"/>

    <!--结束加载提示-->
    <TextView android:id="@+id/text_endLoading"/>
    
    <!--显示网页区域-->
    <WebView android:id="@+id/webView1"/>
</RelativeLayout>

步骤3：实现显示“www.baidu.com”、获取其标题、提示加载开始 & 结束和获取加载进度

public class MainActivity extends AppCompatActivity {
    WebView mWebview;
    WebSettings mWebSettings;
    TextView beginLoading,endLoading,loading,mtitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mWebview = (WebView) findViewById(R.id.webView1);
        beginLoading = (TextView) findViewById(R.id.text_beginLoading);
        endLoading = (TextView) findViewById(R.id.text_endLoading);
        loading = (TextView) findViewById(R.id.text_Loading);
        mtitle = (TextView) findViewById(R.id.title);
        // webSettings 对WebView进行配置和管理
        mWebSettings = mWebview.getSettings();
        mWebview.loadUrl("http://www.baidu.com/");
        // WebViewClient 处理各种通知 & 请求事件
        //设置不用系统浏览器打开,直接显示在当前Webview
        mWebview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        //设置WebChromeClient类
        mWebview.setWebChromeClient(new WebChromeClient() {
            //获取网站标题
            @Override
            public void onReceivedTitle(WebView view, String title) {
                System.out.println("标题在这里");
                mtitle.setText(title);
            }
            //获取加载进度
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress < 100) {
                    String progress = newProgress + "%";
                    loading.setText(progress);
                } else if (newProgress == 100) {
                    String progress = newProgress + "%";
                    loading.setText(progress);
                }
            }
        });


        //设置WebViewClient类
        mWebview.setWebViewClient(new WebViewClient() {
            //设置加载前的函数
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                System.out.println("开始加载了");
                beginLoading.setText("开始加载了");

            }

            //设置结束加载函数
            @Override
            public void onPageFinished(WebView view, String url) {
                endLoading.setText("结束加载了");

            }
        });
    }

    // 点击返回上一页面而不是退出浏览器
    // 在不做任何处理前提下 ，浏览网页时点击系统的“Back”键,整个 Browser 会调用 finish()而结束自身
    // 解决：在当前Activity中处理并消费掉该 Back 事件
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && mWebview.canGoBack()) {
            mWebview.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

    //销毁Webview
    @Override
    protected void onDestroy() {
        if (mWebview != null) {
            mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            // mWebview.clearCache 清除网页访问留下的缓存（针对整个应用程序）
            mWebview.clearHistory(); // 清除当前webview访问的历史记录（针对当前访问记录）
            // 先从父容器中移除webview,然后再销毁webview ->> 防止内存泄露
            ((ViewGroup) mWebview.getParent()).removeView(mWebview);
            mWebview.destroy();
            mWebview = null;
        }
        super.onDestroy();
    }
}

WebView 与 JS 交互方式

Android 调用 JS 方法
通过WebView的loadUrl
Web端

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>js_test</title>
     <script>
    // Android调用JS的方法
   function callJS(message){
      alert("Android调用了JS的callJS方法:参数为" + message);
   }
</script>
   </head>
   <body></body>
</html>

Android端

public class HybirdTestctivity extends AppCompatActivity {

    final String url = "file:///android_asset/js_test.html";

    WebView mWebView;
    Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hybird_testctivity);
        mWebView = (WebView) findViewById(R.id.webView1);
        btn1 = (Button) findViewById(R.id.btn1_hybird);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);        // 设置与Js交互的权限
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);        // 设置允许JS弹窗

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl(url);
        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
            	// 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
                // 设置响应js 的Alert()函数
                AlertDialog.Builder b = new AlertDialog.Builder(HybirdTestctivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
        });
    }

    public void onClick(View view){
        switch (view.getId()){
            case R.id.btn1_hybird:
                // Android通过WebView调用 JS 代码——通过webView.loadUrl
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        // 注意调用的JS方法名要对应上
                        String msg = "Message From Android";
                        mWebView.loadUrl("javascript:callJS('"+msg+"')");
                }});
                break;
        }
    }
}

JS 调用 Android 方法
使用@addJavascriptInterface 注入 java 对象来实现
创建要注入的Java类

// 创建注入的Java类
public class NativeInterface{

    private Context mContext;

    public NativeInterface(Context context){
        mContext = context;
    }

    // 定义JS需要调用的方法
    // 被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg) {
        Log.i("AndroidNative", "hello: "+ msg);
    }

    @JavascriptInterface
    public String getDataFromAndroid() {
        Log.i("AndroidNative", "getDataFromAndroid: "+"JS调用了Android的getDataFromAndroid方法");
        return "Android Data";
    }
}

Android端

		// 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // JSBridge实现JS调用Android:通过addJavascriptInterface()将Java对象注入到JS对象
        // NativeInterface类对象注入到js的AndroidNative对象
        mWebView.addJavascriptInterface(new NativeInterface(this), "AndroidNative");

Web端

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>js_test</title>
     <script>
   // JS调用Android方法
   function hello_android(){
        // 由于对象映射，所以调用AndroidNative对象等于调用Android映射的对象
        AndroidNative.hello("js调用了android中的hello方法");
   }

   function getDataFromAndroid_android(){
        // 由于对象映射，所以调用AndroidNative对象等于调用Android映射的对象
        alert(AndroidNative.getDataFromAndroid());
   }
</script>
   </head>
   <body>
   <button type="button" id="button1" onclick="javascript:hello_android();">点击按钮则调用hello_android函数</button>
   <button type="button" id="button2" onclick="javascript:getDataFromAndroid_android();">点击按钮则调用getDataFromAndroid_android函数</button>
   </body>
</html>

JS 消息回调拦截
通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url
（1）在JS约定所需要的Url协议

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
         function callAndroid(){
            /*约定的url协议为：js://webview?arg1=111&arg2=222*/
            document.location = "js://webview?arg1=111&arg2=222";
         }
      </script>
</head>

<!-- 点击按钮则调用callAndroid（）方法  -->
   <body>
     <button type="button" id="button1" "callAndroid()">点击调用Android代码</button>
   </body>
</html>

（2）在Android通过WebViewClient复写shouldOverrideUrlLoading ()

// 复写WebViewClient类的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(new WebViewClient() {
                                      @Override
                                      public boolean shouldOverrideUrlLoading(WebView view, String url) {

                                          // 步骤2：根据协议的参数，判断是否是所需要的url
                                          // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                          //假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

                                          Uri uri = Uri.parse(url);                                 
                                          // 如果url的协议 = 预先约定的 js 协议
                                          // 就解析往下解析参数
                                          if ( uri.getScheme().equals("js")) {

                                              // 如果 authority  = 预先约定协议里的 webview，即代表都符合约定的协议
                                              // 所以拦截url,下面JS开始调用Android需要的方法
                                              if (uri.getAuthority().equals("webview")) {

                                                 //  步骤3：
                                                  // 执行JS所需要调用的逻辑
                                                  System.out.println("js调用了Android的方法");
                                                  // 可以在协议上带有参数并传递到Android上
                                                  HashMap<String, String> params = new HashMap<>();
                                                  Set<String> collection = uri.getQueryParameterNames();

                                              }

                                              return true;
                                          }
                                          return super.shouldOverrideUrlLoading(view, url);
                                      }
                                  });

通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（）消息
（1）Web端调用prompt() 调用JS输入框

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>
      
     <script>
        
	function clickprompt(){
    // 调用prompt（）
    var result=prompt("js://demo?arg1=111&arg2=222");
    alert("demo " + result);
}

      </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
   <body>
     <button type="button" id="button1" "clickprompt()">点击调用Android代码</button>
   </body>
</html>

（2）在Android通过WebChromeClient复写onJsPrompt（）

mWebView.setWebChromeClient(new WebChromeClient() {
                                        // 拦截输入框(原理同方式2)
                                        // 参数message:代表promt（）的内容（不是url）
                                        // 参数result:代表输入框的返回值
                                        @Override
                                        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                                            // 根据协议的参数，判断是否是所需要的url(原理同方式2)
                                            // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
                                            //假定传入进来的 url = "js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）

                                            Uri uri = Uri.parse(message);
                                            // 如果url的协议 = 预先约定的 js 协议
                                            // 就解析往下解析参数
                                            if ( uri.getScheme().equals("js")) {

                                                // 如果 authority  = 预先约定协议里的 webview，即代表都符合约定的协议
                                                // 所以拦截url,下面JS开始调用Android需要的方法
                                                if (uri.getAuthority().equals("webview")) {

                                                    //
                                                    // 执行JS所需要调用的逻辑
                                                    System.out.println("js调用了Android的方法");
                                                    // 可以在协议上带有参数并传递到Android上
                                                    HashMap<String, String> params = new HashMap<>();
                                                    Set<String> collection = uri.getQueryParameterNames();

                                                    //参数result:代表消息框的返回值(输入值)
                                                    result.confirm("js调用了Android的方法成功啦");
                                                }
                                                return true;
                                            }
                                            return super.onJsPrompt(view, url, message, defaultValue, result);
                                        }

// 通过alert()和confirm()拦截的原理相同，此处不作过多讲述

                                        // 拦截JS的警告框
                                        @Override
                                        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                                            return super.onJsAlert(view, url, message, result);
                                        }

                                        // 拦截JS的确认框
                                        @Override
                                        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                                            return super.onJsConfirm(view, url, message, result);
                                        }
                                    });

WebView 导致内存泄露原因 & 解决

不再使用WebView对象后不销毁，导致占用的内存长期无法回收，从而造成内存泄露。
WebView关联Activity的时候会自动创建线程，绑定了Activity Context。而Activity无法确定这个线程的销毁时间，这个线程的生命周期和我们Activity生命周期是不一样的，这就导致了Activity销毁时，WebView还持有Activity的引用，从而出现内存泄漏问题。
WebView与Activity Context绑定。销毁WebView的时候，需要释放Activity的Context，否则会内存泄露。

在 Activity 销毁（ WebView ）的时候，先让 WebView 加载null内容，然后移除 WebView，再销毁 WebView，最后置空。

@Override
    protected void onDestroy() {
        if (mWebView != null) {
            mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            mWebView.clearHistory();
			// 在关闭了Activity时，如果Webview的音乐或视频，还在播放。就必须销毁Webview
			// 但是注意：webview调用destory时,webview仍绑定在Activity上
			//这是由于自定义webview构建时传入了该Activity的context对象，因此需要先从父容器中移除webview,然后再销毁webview:
            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }

不在xml中定义 WebView ，而是在需要的时候在Activity中创建，并且Context使用 getApplicationContext()

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mWebView = new WebView(getApplicationContext());
        mWebView.setLayoutParams(params);
        mLayout.addView(mWebView);

开启独立进程加载WebView页面，页面关闭后关闭进程

WebView 优化方案 & 框架

WebView 性能问题

Android WebView 里 H5 页面加载速度慢
（1）渲染速度慢：JS解析效率低、手机硬件设备性能低
（2）资源加载慢：H5页面资源多、网络请求数量多
耗费流量
（1）每次使用时需要重新加载Android WebView H5页面
（2）发送大量网络请求

上述问题导致了Android WebView的H5 页面体验与原生Native 存在较大差距。

前端H5的缓存机制（WebView 缓存机制）

浏览器缓存机制
根据 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制
Android WebView内置自动实现，即不需要设置即实现（属于浏览器内核机制），用于存储静态资源文件，如JS、CSS、字体、图片等。
Application Cache 缓存机制
以文件为单位进行缓存，且文件有一定更新机制（类似于浏览器缓存机制，是浏览器缓存的补充），是专门为 Web App离线使用而开发的缓存机制
用于存储静态文件（如JS、CSS、字体文件）
Dom Storage 缓存机制
通过存储字符串的 Key - Value 对来提供，存储控件大、安全、便捷（Dom Storage 机制类似于 Android 的 SharedPreference机制）
用于存储临时、简单的数据。
Web SQL Database 缓存机制
基于 SQL 的数据库存储机制，充分利用数据库的优势，可方便对数据进行增加、删除、修改、查询。存储适合数据库的结构化数据。
Indexed Database 缓存机制
属于 NoSQL 数据库，通过存储字符串的 Key - Value 对来提供（取代Web SQL Database 缓存机制）。通过数据库的事务机制进行数据操作，可对对象任何属性生成索引，方便查询。存储控件大。可存储任何类型对象。
适用于存储复杂、数据量大的结构化数据。

资源预加载

包括 WebView对象 & H5资源预加载

原因
首次创建WebView对象耗时
首次加载H5页面耗时（后续打开H5页面时便有缓存）
具体实现
在Android的 BaseApplication 里初始化一个WebView对象（用于加载常用的H5页面资源）；当需要使用这些页面时，直接从BaseApplication中使用该WebView对象显示、

自身构建缓存

原因
H5页面有一些更新频率低、常用 & 固定的静态资源文件（如JS、CSS文件、图片等）。每次重新加载会浪费很多时间、流量。
解决方案

事先将更新频率较低、常用 & 固定的H5静态资源文件（如JS、CSS文件、图片等）放到本地
拦截H5页面的资源网络请求并进行检测
如果检测到本地具有相同的静态资源就直接从本地读取进行替换而不发送该资源的网络请求到服务器获取

具体实现
重写WebViewClient 的 shouldInterceptRequest 方法，当向服务器访问这些静态资源时进行拦截，检测到是相同的资源则用本地资源代替

		// 假设现在需要拦截一个图片的资源并用本地资源进行替代

        mWebview.setWebViewClient(new WebViewClient() {
            // 重写 WebViewClient  的  shouldInterceptRequest （）
            // API 21 以下用shouldInterceptRequest(WebView view, String url)
            // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
            // 下面会详细说明

             // API 21 以下用shouldInterceptRequest(WebView view, String url)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

                // 步骤1:判断拦截资源的条件，即判断url里的图片资源的文件名
                if (url.contains("logo.gif")) {
                // 假设网页里该图片资源的地址为：http://abc.com/imgage/logo.gif
                // 图片的资源文件名为:logo.gif

                    InputStream is = null;
                    // 步骤2:创建一个输入流

                    try {
                        is =getApplicationContext().getAssets().open("images/abc.png");
                        // 步骤3:获得需要替换的资源(存放在assets文件夹里)
                        // a. 先在app/src/main下创建一个assets文件夹
                        // b. 在assets文件夹里再创建一个images文件夹
                        // c. 在images文件夹放上需要替换的资源（此处替换的是abc.png图片）

                    } catch (IOException e) {
                        e.printStackTrace();
                    }

                    // 步骤4:替换资源
                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 参数1：http请求里该图片的Content-Type,此处图片为image/png
                    // 参数2：编码类型
                    // 参数3：存放着替换资源的输入流（上面创建的那个）
                    return response;
                }

                return super.shouldInterceptRequest(view, url);
            }

            
           // API 21 以上用shouldInterceptRequest(WebView view, WebResourceRequest request)
            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {

               // 步骤1:判断拦截资源的条件，即判断url里的图片资源的文件名
                if (request.getUrl().toString().contains("logo.gif")) {
                // 假设网页里该图片资源的地址为：http://abc.com/imgage/logo.gif
                // 图片的资源文件名为:logo.gif

                    InputStream is = null;
                    // 步骤2:创建一个输入流

                    try {
                        is = getApplicationContext().getAssets().open("images/abc.png");
                         // 步骤3:获得需要替换的资源(存放在assets文件夹里)
                        // a. 先在app/src/main下创建一个assets文件夹
                        // b. 在assets文件夹里再创建一个images文件夹
                        // c. 在images文件夹放上需要替换的资源（此处替换的是abc.png图片

                    } catch (IOException e) {
                        e.printStackTrace();
                    }

                    // 步骤4:替换网络返回资源
                    WebResourceResponse response = new WebResourceResponse("image/png",
                            "utf-8", is);
                    // 参数1：http请求里该图片的Content-Type,此处图片为image/png
                    // 参数2：编码类型
                    // 参数3：存放着替换资源的输入流（上面创建的那个）
                    return response;
                }
                return super.shouldInterceptRequest(view, request);
            }

    });
}

Hybird 框架

腾讯祭出大招VasSonic，让你的H5页面首屏秒开

优化方案：

启动流程彻底拆分，设计为一个状态机按序按需执行
View相关拆分模块化设计，尽可能懒加载，IO异步化
X5内核在手Q中的独立进程中提前预加载
创建WebView对象复用池
静态直出
离线预推：把页面的资源提前拉取到本地，当用户加载资源的时候，相当于从本地加载，即使没有网络，也能展示首屏页面。这个也就是大家熟悉的离线包。（在弱网络或者网速比较差的环境下加载资源耗时耗资源）
并行加载
动态缓存（将用户的已经加载的页面内容缓存下来，等用户下此点击页面的时候，我们先加载展示页面缓存，第一时间让用户看到内容，然后同时去请求新的页面数据，等新的页面数据拉取下来之后，我们再重新加载一遍即可。）
页面分离
请求规范约定
首次加载 & 非首次加载之完全缓存/增量数据/模块更新

第十一章 WebView

WebView

Hybird 开发

WebView 是什么 & 作用 & 内核

WebView 基本使用

WebSettings & WebViewClient & WebChromeClient

使用案例

WebView 与 JS 交互方式

WebView 导致内存泄露原因 & 解决

WebView 优化方案 & 框架

前端H5的缓存机制（WebView 缓存机制）

资源预加载

自身构建缓存

Hybird 框架

相关阅读

相关文章

相关问答

相关文档

第十一章 WebView

WebView

Hybird 开发

WebView 是什么 & 作用 & 内核

WebView 基本使用

WebSettings & WebViewClient & WebChromeClient

使用案例

WebView 与 JS 交互方式

WebView 导致内存泄露 原因 & 解决

WebView 优化方案 & 框架

前端H5的缓存机制（WebView 缓存机制）

资源预加载

自身构建缓存

Hybird 框架

相关阅读

相关文章

相关问答

相关文档

WebView 导致内存泄露原因 & 解决