第十一章 WebView
文章目录
- WebView
- Hybird 开发
- WebView 是什么 & 作用 & 内核
- WebView 基本使用
- WebSettings & WebViewClient & WebChromeClient
- 使用案例
- WebView 与 JS 交互方式
- WebView 导致内存泄露 原因 & 解决
- WebView 优化方案 & 框架
- 前端H5的缓存机制（WebView 缓存机制）
- 资源预加载
- 自身构建缓存
- Hybird 框架
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
<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端
<html>
<head>
<meta charset="utf-8">
<title>js_testtitle>
<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端
<html>
<head>
<meta charset="utf-8">
<title>js_testtitle>
<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协议
<html>
<head>
<meta charset="utf-8">
<title>Carson_Hotitle>
<script>
function callAndroid(){
/*约定的url协议为：js://webview?arg1=111&arg2=222*/
document.location = "js://webview?arg1=111&arg2=222";
}
script>
head>
<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输入框
<html>
<head>
<meta charset="utf-8">
<title>Carson_Hotitle>
<script>
function clickprompt(){
// 调用prompt（）
var result=prompt("js://demo?arg1=111&arg2=222");
alert("demo " + result);
}
script>
head>
<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对象复用池
- 静态直出
- 离线预推：把页面的资源提前拉取到本地，当用户加载资源的时候，相当于从本地加载，即使没有网络，也能展示首屏页面。这个也就是大家熟悉的离线包。（在弱网络或者网速比较差的环境下加载资源耗时耗资源）
- 并行加载
- 动态缓存（将用户的已经加载的页面内容缓存下来，等用户下此点击页面的时候，我们先加载展示页面缓存，第一时间让用户看到内容，然后同时去请求新的页面数据，等新的页面数据拉取下来之后，我们再重新加载一遍即可。）
- 页面分离
- 请求规范约定
- 首次加载 & 非首次加载之 完全缓存/增量数据/模块更新