Android WebView离线缓存 WebViewAssetLoader 的使用

最新推荐文章于 2022-10-17 16:04:15 发布

xq9527--

最新推荐文章于 2022-10-17 16:04:15 发布

阅读量1.6k

点赞数

分类专栏： android 文章标签： android

本文链接：https://blog.csdn.net/xq610928/article/details/124429998

版权

android 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

前言：

各位同学大家好，最近很长时间没有更新文章了。因为搬到新家去了所以留给自己的时间非常的少，今天因为在项目开发上面遇到一些问题所以就想记录分享出来。

问题原因

是这样的，项目组这边做了一个安卓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 自带的缓存机制来实现，但并不可靠，于是需要通过拦截网络请求，通过本地缓存干预的方式来实现。具体原理如下：
我们看下官方的介绍

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 方法进行一个循环匹配本地资源路径

我们通过分析源码可以看到循环去查找本地资源匹配

因为这边给到的本地资源不是很全

    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

xq9527--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android WebView离线缓存 WebViewAssetLoader 的使用

前言：各位同学大家好，最近很长时间没有更新文章了。因为搬到新家去了所以留给自己的时间非常的少，今天因为在项目开发上面遇到一些问题所以就想记录分享出来。问题原因是这样的，项目组这边做了一个安卓WebView 嵌套H5链接的游戏壳包。相信很多同学做过类似的需求很多同学会说这个很简单初始化webview控件然后设置webviewsetting 即可最后调用 xWalkView.loadUrl(url); 方法即可因为我们加载的一个H5游戏在初始化加载进度条的时候有一个下载动作非
复制链接

扫一扫