android 6.0 webview 加载js_Flutter下实现WebView拦截加载离线资源

最新推荐文章于 2021-12-09 14:19:50 发布

weixin_39542043

最新推荐文章于 2021-12-09 14:19:50 发布

阅读量589

点赞数

文章标签： android 6.0 webview 加载js

本文链接：https://blog.csdn.net/weixin_39542043/article/details/112138090

版权

本文介绍了如何在Flutter应用中实现WebView拦截加载本地资源，特别是在Android 6.0上。作者提供了修改官方webview_flutter插件的方法，通过拦截网络请求并在Android和iOS端分别实现资源的本地加载。在Android端，主要涉及WebViewClient的修改和MethodChannel的使用；在iOS端，通过NSURLProtocol拦截请求并处理。文章还包括了详细的步骤和代码示例。

摘要由CSDN通过智能技术生成

秦子帅明确目标，每天进步一点点.....

作者 | 星星y

地址 | https://www.jianshu.com/p/dae373ca9f0f

前言

哎，Flutter真香啊

在用移动设备加载H5页面时，一些公共资源如css，js，图片等如果比较大时，就需要通过拦截网络，改从本地资源加载。在Android原生WebView中，我们可以在WebViewClient中的shouldInterceptRequest方法来拦截替换资源。
然而在Flutter中的WebView插件，不管是官方的webview_flutter,还是flutter_webview_plugin都不支持加载本地资源。
庆幸的是webview_flutter底层实现是基于WebView(Android)和WKWebView(iOS)。只要在官方webview_flutter上稍作修改，就可以实现离线资源加载。

项目地址

github: https://github.com/iamyours/webview_flutter

pub:https://pub.dev/packages/iwebview_flutter

Android端实现

首先我们从`webview_flutter`中下载最新Archive(当前使用`0.3.15+1`)。https://pub.dev/packages/webview_flutter/versions解压后，使用AndroidStudio打开，右键工程目录，使用Android模式打开

如果要实现WebView请求拦截，就必须给webView设置WebViewCilent，全局搜索setWebViewClient找到只有一处实现:

//FlutterWebView.javaprivate void applySettings(Map<String, Object> settings) { for (String key : settings.keySet()) { switch (key) { ...case "hasNavigationDelegate": final boolean hasNavigationDelegate = (boolean) settings.get(key); final WebViewClient webViewClient = flutterWebViewClient.createWebViewClient(hasNavigationDelegate); webView.setWebViewClient(webViewClient);break; ... } } }

修改WebViewClient

通过以上代码我们知道具体逻辑在createWebViewClient方法中：

WebViewClient createWebViewClient(boolean hasNavigationDelegate) { this.hasNavigationDelegate = hasNavigationDelegate;if (!hasNavigationDelegate || android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) { return internalCreateWebViewClient(); }return internalCreateWebViewClientCompat(); }

然后在internalCreate