WebView拦截线上资源，加载离线资源

优化加载：WebView拦截加载离线资源

最新推荐文章于 2025-09-11 06:46:32 发布

原创最新推荐文章于 2025-09-11 06:46:32 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#WebView #离线资源

开发经验专栏收录该内容

5 篇文章

订阅专栏

在项目开发中，通过Charles分析发现Webview加载网页时存在大体积js和css资源，影响加载速度和用户体验。本文介绍了如何在客户端通过WebView拦截线上资源，转而加载本地离线资源，提升Webview的加载效率。重点讲解了拦截资源的步骤，包括获取需要拦截的资源、设置WebViewClient进行拦截，并强调了注意事项，如正确设置mimeType和与前端约定资源文件名。

一、前言

最近的项目开发中接入了一些网页功能，Webview加载完成大约需要10秒左右，经过使用Charles抓包分析，发现在加载过程中出现了几个比较大的js和css文件，这些文件在没有压缩之前有15M左右，发布线上压缩有也有3M左右，这些资源严重影响了webview的加载速度，同时也带来了不好的体验。在极致情况下，web端应该去做这些优化处理，但在项目赶时间的情况下，客户端在做了这些大文件资源做了离线处理，让webview加载这些的时候从本地加载。

二、Webview拦截资源

2.1获取需要拦截的资源

//本地缓存路径，一般都放在assets目录中
private static final String PATH_WEB_RESOURCE = "www";
private List<String> offlineResource;

//获取需要的缓存文件
private List<String> fetchOfflineResource(Context context) {
    AssetManager assetManager = context.getAssets();
    try {
        String[] res = assetManager.list(PATH_WEB_RESOURCE);
        if (res != null) {
            return Arrays.asList(res);
        }
    } catch (Exception ex) {
        ex.printStackTrace();
    }
    return null;
}

2.2拦截处理

Webview中拦截需要 WebViewClient

setWebViewClient(new WebViewClient(){

    //重写以下方法，兼容不同的版本
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView webView, String s) {
        int last = s.lastIndexOf("/");
        if (last != -1) {
            if (s.endsWith(".js") || s.endsWith(".css")) {
                String suffix = s.substring(last);
                if (offlineResource.contains(suffix)) {
                    String mimeType;
                    if (suffix.endsWith(".js")) {
                        mimeType = "application/x-javascript";
                    } else if (suffix.endsWith(".css")) {
                        mimeType = "text/css";
                    }
                    try {
                        return new WebResourceResponse(mimeType, "UTF-8", getContext().getResources().getAssets().open(PATH_WEB_RESOURCE + suffix));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
        return super.shouldInterceptRequest(webView, s);
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest) {
        return shouldInterceptRequest(webView, webResourceRequest.getUrl().toString());
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest, Bundle bundle) {
        return shouldInterceptRequest(webView, webResourceRequest.getUrl().toString());
    }
});