前言 ：
各位同學大家好送爸，最近很長時間沒有更新文章了。因為搬到新家去了 所以留給自己的時間非常的少暖释，今天因為在項目開發(fā)上面遇到一些問題 所以就想記錄分享出來袭厂。
問題原因
是這樣的，項目組這邊做了一個安卓WebView 嵌套H5鏈接的游戲殼包 球匕。相信很多同學做過類似的需求
很多同學會說這個很簡單 初始化webview控件 然后 設置webviewsetting 即可 最后調用 xWalkView.loadUrl(url); 方法即可 因為我們加載的一個H5游戲 在初始化加載進度條的時候有一個下載動作 非常的吃網速 所以我們想到用webview 離線緩存來加載一些本地的js和圖片資源纹磺。
需要用到的三方庫
implementation "androidx.webkit:webkit:1.2.0"
|## 具體實現(xiàn)：
布局文件
<?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 然后我們 看下具體實現(xiàn)
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 自帶的緩存機制來實現(xiàn)秘症，但并不可靠，于是需要通過攔截網絡請求式矫，通過本地緩存干預的方式來實現(xiàn)乡摹。具體原理如下：
我們看下官方的介紹
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");
我們在官方代碼里面可以看到官方提供了不同系統(tǒng)版本的 shouldInterceptRequest 回調方法里面的處理方式 api>=21和 api<21 的放到今天我們基本不用考慮 api<21 的情況 哈哈
具體實現(xiàn)
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 方法進行一個循環(huán)匹配本地資源路徑
image.png
image.png
我們通過分析源碼可以看到循環(huán)去查找本地資源匹配
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合作公司那邊對接過技術方案 那邊直接是用三方處理的 我們這邊技術負責人 自己就看了官方代碼自己實現(xiàn)了 。最后還是有人協(xié)助解決掉了 所提記錄下 希望能幫助到各位網友 采转。 最后希望我的文章能幫助到各位解決問題 聪廉，以后我還會貢獻更多有用的代碼分享給大家。各位同學如果覺得文章還不錯 氏义，麻煩給關注和star锄列，小弟在這里謝過啦!
官方介紹 WebViewAssetLoader 地址：
https://developer.android.google.cn/reference/kotlin/androidx/webkit/WebViewAssetLoader
