前言 ：
各位同学大家好，最近很长时间没有更新文章了。因为搬到新家去了 所以留给自己的时间非常的少，今天因为在项目开发上面遇到一些问题 所以就想记录分享出来。
问题原因
是这样的，项目组这边做了一个安卓WebView 嵌套H5链接的游戏壳包 。相信很多同学做过类似的需求
很多同学会说这个很简单 初始化webview控件 然后 设置webviewsetting 即可 最后调用 xWalkView.loadUrl(url); 方法即可 因为我们加载的一个H5游戏 在初始化加载进度条的时候有一个下载动作 非常的吃网速 所以我们想到用webview 离线缓存来加载一些本地的js和图片资源。
需要用到的三方库
implementation "androidx.webkit:webkit:1.2.0"
|## 具体实现：
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
>
<WebView
android:id="@+id/wv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
布局就一个简单的webview 然后我们 看下具体实现
xWalkView = (WebView) findViewById(R.id.wv);
WebSettings webSetting = xWalkView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
// webSetting.setAllowFileAccess(true);
// webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSetting.setSupportZoom(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setUseWideViewPort(true);
webSetting.setSupportMultipleWindows(true);
// webSetting.setLoadWithOverviewMode(true);
webSetting.setAppCacheEnabled(true);
// webSetting.setDatabaseEnabled(true);
webSetting.setDomStorageEnabled(true);
webSetting.setGeolocationEnabled(true);
webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSetting.setAllowFileAccessFromFileURLs(false);
// Off by default, deprecated for SDK versions >= 30.
webSetting.setAllowUniversalAccessFromFileURLs(false);
// Keeping these off is less critical but still a good idea, especially if your app is not
// using file:// or content:// URLs.
webSetting.setAllowFileAccess(true);
webSetting.setAllowContentAccess(true);
为了减少网络访问的流量，以及提升在弱网络或无网络情况下的体验，需要对网络访问的图片进行本地缓存。
原先采用的是 WebView 自带的缓存机制来实现，但并不可靠，于是需要通过拦截网络请求，通过本地缓存干预的方式来实现。具体原理如下：
我们看下官方的介绍
image.png
final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
.addPathHandler("/assets/", new AssetsPathHandler(this))
.build();
webView.setWebViewClient(new WebViewClient() {
@Override
@RequiresApi(21)
public WebResourceResponse shouldInterceptRequest(WebView view,
WebResourceRequest request) {
return assetLoader.shouldInterceptRequest(request.getUrl());
}
@Override
@SuppressWarnings("deprecation") // for API < 21
public WebResourceResponse shouldInterceptRequest(WebView view,
WebResourceRequest request) {
return assetLoader.shouldInterceptRequest(Uri.parse(request));
}
});
WebSettings webViewSettings = webView.getSettings();
// Setting this off for security. Off by default for SDK versions >= 16.
webViewSettings.setAllowFileAccessFromFileURLs(false);
// Off by default, deprecated for SDK versions >= 30.
webViewSettings.setAllowUniversalAccessFromFileURLs(false);
// Keeping these off is less critical but still a good idea, especially if your app is not
// using file:// or content:// URLs.
webViewSettings.setAllowFileAccess(false);
webViewSettings.setAllowContentAccess(false);
// Assets are hosted under http(s)://appassets.androidplatform.net/assets/... .
// If the application's assets are in the "main/assets" folder this will read the file
// from "main/assets/www/index.html" and load it as if it were hosted on:
// https://appassets.androidplatform.net/assets/www/index.html
webview.loadUrl("https://appassets.androidplatform.net/assets/www/index.html");
我们在官方代码里面可以看到官方提供了不同系统版本的 shouldInterceptRequest 回调方法里面的处理方式 api>=21和 api<21 的放到今天我们基本不用考虑 api<21 的情况 哈哈
具体实现
final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
.setDomain("js远程访问域名"）
.addPathHandler("/", new WebViewAssetLoader.AssetsPathHandler(this))
.build();
xWalkView.loadUrl(url);
xWalkView.setWebViewClient(new WebViewClient(){
@Override
public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest request) {
//if (request.getUrl().toString().contains("main.min.js")) {
MKDebug.log(request.getUrl().toString());
if (request.getUrl().toString().contains(".js")) {
MKDebug.log("....");
Log.e(TAG, "shouldInterceptRequest:request.getUrl() -- > " + request.getUrl());
try {
WebResourceResponse obj = assetLoader.shouldInterceptRequest(request.getUrl());
if (obj != null) {
Log.e(TAG, "shouldInterceptRequest: obj --- > " + obj);
Map headers = new HashMap<>();
headers.put("Access-Control-Allow-Origin", "*");
headers.put("Access-Control-Allow-Headers", "X-Requested-With");
headers.put("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
headers.put("Access-Control-Allow-Credentials", "true");
String pp = request.getUrl().getPath();
String path = removeLeadingSlash(pp);
String mimeType = guessMimeType(path);
StringBuffer stringBuffer = new StringBuffer();
BufferedReader bufferedReader = null;
Log.e(TAG, "shouldInterceptRequest: " + obj.getData());
bufferedReader = new BufferedReader(new InputStreamReader(obj.getData()));
String line = "";
try {
while ((line = bufferedReader.readLine()) != null) {
stringBuffer.append(line);
if (line.equals("<head>")) {
// 在<head>中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
stringBuffer.append("<meta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\">");
}
}
} catch (Exception e) {
}
WebResourceResponse response = new WebResourceResponse(mimeType,
"utf-8", 200, "OK", headers,
new ByteArrayInputStream(stringBuffer.toString().getBytes()));
MKDebug.log(response == null ? "无内容" : "有内容");
return response;
} else {
return null;
}
} catch (Exception e) {
return null;
}
}else{
return null;
}
这边在 shouldInterceptRequest 回调方法里面拿到 request 对象后 我们
WebResourceResponse obj = assetLoader.shouldInterceptRequest(request.getUrl());
通过 上面的assetLoader对象调用一个shouldInterceptRequest 方法进行一个循环匹配本地资源路径
image.png
image.png
我们通过分析源码可以看到循环去查找本地资源匹配
image.png
因为这边给到的本地资源不是很全
image.png
if (request.getUrl().toString().contains(".js")) {
Log.e(TAG, "shouldInterceptRequest:request.getUrl() -- > " + request.getUrl());
try {
WebResourceResponse obj = assetLoader.shouldInterceptRequest(request.getUrl());
if (obj != null) {
Log.e(TAG, "shouldInterceptRequest: obj --- > " + obj);
Map headers = new HashMap<>();
headers.put("Access-Control-Allow-Origin", "*");
headers.put("Access-Control-Allow-Headers", "X-Requested-With");
headers.put("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
headers.put("Access-Control-Allow-Credentials", "true");
String pp = request.getUrl().getPath();
String path = removeLeadingSlash(pp);
String mimeType = guessMimeType(path);
StringBuffer stringBuffer = new StringBuffer();
BufferedReader bufferedReader = null;
Log.e(TAG, "shouldInterceptRequest: " + obj.getData());
bufferedReader = new BufferedReader(new InputStreamReader(obj.getData()));
String line = "";
try {
while ((line = bufferedReader.readLine()) != null) {
stringBuffer.append(line);
if (line.equals("<head>")) {
// 在<head>中添加<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
stringBuffer.append("<meta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\">");
}
}
} catch (Exception e) {
}
WebResourceResponse response = new WebResourceResponse(mimeType,
"utf-8", 200, "OK", headers,
new ByteArrayInputStream(stringBuffer.toString().getBytes()));
MKDebug.log(response == null ? "无内容" : "有内容");
return response;
} else {
return null;
}
} catch (Exception e) {
return null;
}
}else{
return null;
}
所以我们只判断包含.js的文件其余的我们不处理 然后图片这边处理有点问题 我直接简单粗暴的try catch捕获异常处理了 包没有崩溃 最后效果是加了webview离线缓存包确实比没有处理的好加载快很多 因为有部分的js用的assets目录下的资源 .
最后总结 ：
这次处理这个项目 我也是一脸懵 跟cp合作公司那边对接过技术方案 那边直接是用三方处理的 我们这边技术负责人 自己就看了官方代码自己实现了 。最后还是有人协助解决掉了 所提记录下 希望能帮助到各位网友 。 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦!
官方介绍 WebViewAssetLoader 地址：
https://developer.android.google.cn/reference/kotlin/androidx/webkit/WebViewAssetLoader
网友评论