WebView套壳实战

最新推荐文章于 2024-07-01 15:00:16 发布
最新推荐文章于 2024-07-01 15:00:16 发布
阅读量2.2k 收藏 6
点赞数 2
分类专栏： android开发 文章标签： WebView Web View缓存 Web View Cookie WebView的使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010782846/article/details/88722670
版权

WebView套壳实战经验分享

前言

GitHub
市面上大多理论只是的讲解，在此我不在过多的话语，我更希望的是直接按照实战来给大家伙讲解我在使用WebVIew作为壳嵌套WebApp的一些经验之谈。

WebView的初级使用

WebView对象的创建

		if (webView == null) {
            	webView = new WebView(context);
           }
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        webView.setLayoutParams(layoutParams);
        dynamicContainer.addView(webView);

没有直接把WebView放在布局中是为了防止内存泄漏，下文想详细讲解这一块。

WebSettings我们需要设置些什么

WebSettings是什么

WebSettings是WebView管理设置状态的类，WebVIew初始化后会创建WebSettings设置一些默认的状态，我们需要修改需要通过WebView.getSettings()获取到；如果Web View被干掉之后还继续调用WebSettings会导致崩溃。

WebSettings有那些需要关注的项目
  1. WebSettings.setBuiltInZoomControls: 支持内置缩放机制，默认为false 官方推荐设置为true
  2. WebSettings.setUserAgentString (String userAgent):设置用户代理为了不影响默认的用户代理，建议取出来用“;”隔开添加
  3. WebSettings.setUseWideViewPort:设置WebView是否支持meta标签，true 为支持，因为前端适配各种设备需要使用这个标签，所以建议打开
  4. WebSettings.setSupportMultipleWindows:设置是否支持多屏应用，默认为false,建议不适配多屏多不开启
  5. WebSettings.setLoadWithOverviewMode:是否启用概览模式，即缩小内容宽度以适应屏幕
  6. WebSettings.setJavaScriptEnabled:启用JS支持，这个必须设置True,否则无法使用JS
  7. WebSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN):设置底层布局算法，建议使用WebSettings.LayoutAlgorithm.SINGLE_COLUMN为自适应屏幕，默认为WebSettings.LayoutAlgorithm.NORMAL不做任何渲染处理
  8. WebSettings.setSupportZoom:是否支持手势屏幕的缩放，建议设置为false
  9. WebSettings.setDomStorageEnabled:开启DomStorage缓存
  10. WebSettings.setCacheMode(WebSettings.LOAD_DEFAULT)：设置缓存类型，推荐使用 WebSettings.LOAD_DEFAULT，前端通过cache-control控制缓存时间。

代码例子为：

		WebSettings webSettings = webView.getSettings();
        if (Build.VERSION.SDK_INT >= 19) {
            webSettings.setLoadsImagesAutomatically(true);//图片自动缩放 打开
        } else {
            webSettings.setLoadsImagesAutomatically(false);//图片自动缩放 关闭
        }
        webSettings.setDefaultTextEncodingName("utf-8");
        webSettings.setBuiltInZoomControls(true);
        String ua = webSettings.getUserAgentString();
        webSettings.setUserAgentString(ua + ";webview");
        webSettings.setUseWideViewPort(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//自适应屏幕
        webSettings.setSupportZoom(false);
        webSettings.supportMultipleWindows();
        webSettings.setAllowFileAccess(true);
        webSettings.setNeedInitialFocus(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //开启DOM stoare
        webSettings.setDomStorageEnabled(true);
        //为了迎合浏览器缓存 设置有缓存 缓存本地的、无缓存访问网络的缓存模式
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);``

基础WebViewClient我们需要关注那些问题

WebViewClient是WebVIew用于监听WebView加载URL 的过程，比如开启加载url、加载url过程中、结束加载url等过程.

WebViewClient正确使用姿势
  • 创建继承WebViewClient的派生类
  • webview.setWebViewClient(webviewclient)
WebVIewClient相关类
  • public void onPageStarted(WebView view, String url, Bitmap favicon)：页面开始加载监听，其中view为设置WebViewClient对应的WebView,url为加载的资源路径，favicon是前端设置的图标
  • public boolean shouldOverrideUrlLoading(WebView view, String url):判断在手机APP内打开网页的方式，系统默认返回false,跳转到手机浏览器，返回true则不触发后续跳转到手机浏览器的方式
  • public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)：API大于21
  • public void onPageFinished(WebView view, String url) ：为页面加载完毕回调
  • public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)：前端获取资源或者加载Url报错的时候回调，适用于少于API23的设备，其中errorCode为错误码，description为错误描述，failingUrl为访问失败的URL
  • public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)：出错时回调，适用于API大于23的设备
  • doUpdateVisitedHistory：用于清理清空历史栈
	public static final String DISCONNECT_ERROR_MSG = "net::ERR_NAME_NOT_RESOLVED";
    public static final String DISCONNECT_EMPTY_ERROR_MSG = "net::ERR_EMPTY_RESPONSE";
    //兼容OPPO 8.0超时问题
    public static final String DISCONNECT_CONNECTION_TIMED_OUT_MSG = "net::ERR_CONNECTION_TIMED_OUT";
    //华为超时兼容
    public static final String HUIWEI_TIMED_OUT = "net::ERR_TIMED_OUT";
	private WebViewClient webViewClient = new WebViewClient() {
        private boolean isLoadingHttp = false;

        @Override
        public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
             super.doUpdateVisitedHistory(view, url, isReload);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return super.shouldOverrideUrlLoading(view, url);
        }



        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            return super.shouldOverrideUrlLoading(view, request);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            loadingLayout.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            loadingLayout.setVisibility(View.GONE);
        }

        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            super.onReceivedError(view, request, error);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!android.text.TextUtils.isEmpty(request.getUrl().getPath())) {
                    noNetHandle(request.getUrl().getPath(), error.getDescription().toString(), 100);
                }

            }
        }

        private void noNetHandle(String url, String des, int errorCode) {

            if (url == null) {
                return;
            }

            boolean isExistingQuery = url.contains("?");
            int startIndex = url.lastIndexOf("/") + 1;
            int endIndex = url.length();
            String endFile;
            if (isExistingQuery) {
                endIndex = url.lastIndexOf("?");
            }
            endFile = url.substring(startIndex, endIndex);
            if (!endFile.contains(".") || "html".equalsIgnoreCase(endFile.substring(endFile.indexOf(".") + 1)) || isLoadingHttp) {

                if (isLoadingHttp) {
                    isLoadingHttp = false;
                }

                if (DISCONNECT_ERROR_MSG.equalsIgnoreCase(des)
                        || DISCONNECT_EMPTY_ERROR_MSG.equalsIgnoreCase(des)
                        || DISCONNECT_CONNECTION_TIMED_OUT_MSG.equalsIgnoreCase(des)
                        || HUIWEI_TIMED_OUT.equalsIgnoreCase(des)
                        || errorCode == ERROR_HOST_LOOKUP
                        || errorCode == ERROR_CONNECT
                        || errorCode == ERROR_TIMEOUT) {
                    netError();
                }
            }
        }

        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            super.onReceivedError(view, errorCode, description, failingUrl);
            if (!android.text.TextUtils.isEmpty(failingUrl)) {
                noNetHandle(failingUrl, description, errorCode);
            }

        }


    };

基础WebChromeClient我们需要关注那些问题

WebChromeClient提供了拦截页面加载进度、JS提示框、确认框、警告框、标题等功能。
onJsPrompt、onJsAlert、onJsConfirm分别表示拦截JS的提示框、警告框和确认框，一般不做任何处理。

  • onProgressChanged(WebView view, int newProgress)：回调页面加载网页的进度条进度。

加载远程Url

	String url="https://www.hao123.com/"；
	webView.loadUrl(url );

加载本地的Url

	webView.loadUrl("file:///android_asset/index.html");

使用WebView关注的一些问题

如何避免WebView内存泄漏

  • 采用New的方式创建WebView而不是通过XML
  • 显示调用WebView.destroy()

WebView是Android很容易导致内存泄漏的组件，究其原理主要是因为以下方面导致的一些问题：

  • WebView注册的事件没有反注册导致一些问题使得WebView引用无法释放，Activity 也没有办法释放
采用New的方式创建WebView而不是通过XML
		if (webView == null）  {
            webView = new WebView(context);
        }
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        webView.setLayoutParams(layoutParams);
        dynamicContainer.addView(webView);
显示调用WebView.destroy()
		if( webView!=null) {

            // 如果先调用destroy()方法，则会命中if (isDestroyed()) return;这一行代码，需要先onDetachedFromWindow()，再
            // destory()
            ViewParent parent = webView.getParent();
            if (parent != null) {
                ((ViewGroup) parent).removeView(webView);
            }

            webView.stopLoading();
            // 退出时调用此方法，移除绑定的服务，否则某些特定系统会报错
            webView.getSettings().setJavaScriptEnabled(false);
            webView.clearHistory();
            webView.clearView();
            webView.removeAllViews();
            webView.destroy();
            webView=null;
        }

我们应当如何选择较好的JS和Android通信的方案

因为前端有很多硬件功能是无法直接调用实现的，所以有部分功能需要JS发送指令给Android端，然后Android端调用原生API，最后Android完成后发送结果信息给JS呈现，JS和Android 通信是WebView壳最重要的部分，主要根据两个方向整理

JS调用Android的方法

Js调用Android的方式有如下几个方法：

  • 拦截shouldOverrideUrlLoading方法
  • 拦截alert、prompt、confirm处理方法
  • addJavascriptInterface注册Android对象供H5调用
拦截shouldOverrideUrlLoading方法

H5进行window.location.href调用对应的url,会调用WebViewClient中的这个方法，所以我们可以规定相应的协议进行处理，一般我的Scheme格式如下：{公司缩写}?/na.api/{功能块}?action={具体行为}&param={参数} ，
比如：lyc://na.api/test_mobile_func?item=xxx&param=xxx
定义好协议后，我们来看看处理shouldOverrideUrlLoading拦截的办法：

public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.e("cloudy", "shouldOverrideUrlLoading, url: " + url);
            if (判断Scheme头是否是我们的协议头） {
            	//解析出功能块和具体参数，做对象的操作
                return true;
            } 
        }
拦截alert、prompt、confirm处理方法

和拦截shouldOverrideUrlLoading方法类似，在WebChromeClient中回调，这里不在说明使用方法。

addJavascriptInterface注册Android对象供H5调用

WebView可以通过对Web页面注入一个全局对象的方式，对H5进行注入方法，让H5直接调用
WebView注入对象：

        webView.addJavascriptInterface(new JavaScriptInterface(), "JSAndroid");

JavaScriptInterface中可以直接编写方法：

public class JavaScriptInterface {

    @android.webkit.JavascriptInterface
    public boolean test(String msg) {
        Toast.makeText(AppManager.getApp(), "JS Callback", Toast.LENGTH_SHORT).show();
        return isCheckOk;
    }
}

H5想要调用原生的test方法时，可以这样调用：

window.JSAndroid.test(“我是H5来的提示”)

尽管这个方法很简单，同时也可以设置很好的扩展性，但是Android4.2以前这是存在安全漏洞的，JS拿到JSAndroid对象后，很容易侵入一些异常操作，So我们需要解决这个问题：

  • 因为在低于API17的WebView上默认添加"searchBoxJavaBridge_"到JavaScriptObjects中使用，removeJavascriptInterface(“searchBoxJavaBridge_”)移除searchBoxJavaBridge_对象。
  • 对方法的参数进行验证处理
  • 使用shouldOverrideUrlLoading替代方案
Android给JS反馈结果回调方法

Android 调用JS的方法有两种方法：

  • 通过WebView.loadUrl(“javascript:方法名(‘参数’)”)
  • Android4.4以上还可以webview.evaluateJavascript(js,callBack),js为"javascript:方法名(‘参数’)"，好处是能获取到H5的return

当我们使Webview.loadUrl的时候，我们肯定不会直接这样使用，这样太麻烦了，我们可以做类似这样的封装：

其中，callback为调用的js方法，query、value做为返回值传回去

public void setCheckResult(String query, String value, String callback) {
        try {
            JSONObject json = new JSONObject();
            json.put(query, value);
           if (entryWebView != null) {
                entryWebView.loadUrl("javascript:" + callback + "('" + 功能标示 + "'," + json.toString() + ")");
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

WebView使用的维护Cookie的算法讲解

WebView通过对Cookie写入文件来对Cookie进行持久化缓存，当WebView检测到服务端反馈的Cookie字段后会显示到缓存头中，在前端调试工具我们也能具体的看到这些字段，然后WebView会把字段缓存到 datd/data/{包名}/app_webview/中到Cookies文件中，这个过程是异步的，所以有时候我们会发现，当我们杀死APP进程后，再开启有几率会无法获取到之前最新的Cookie值，这就是因为Cookie异步写入Cookies文件持久化这个步骤被中断了，假如我们想要确保Cookie正确更新，应该使用如下代码：

			CookieManager cookieManager = CookieManager.getInstance();
            String cookiesStr = cookieManager.getCookie(url);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                cookieManager.flush();
            }

缓存策略的我们应该如何选择

WebView缓存策略需要开启有如下几个方面：

  • 浏览器支持的缓存策略，使用webSettings.setCacheMode(缓存类型)开启，前端再配置Cache-Control和Last-Modified即可，也叫协议缓存
  • Application Cache 缓存机制
  • Dom Storage 缓存机制
  • Indexed Database 缓存机制
  • Web SQL Database 缓存机制

根据业务修改开启各类缓存，但是个人建议除了使用浏览器缓存外，其他一般不使用，这里就不讲太多，只详细讲解浏览器缓存。

浏览器缓存

浏览器缓存是浏览器自带的一种缓存机制，因为默认情况下WebView的CacheMode为WebSettings.LOAD_DEFAULT，已经是我们最优解，所以Android这边不用做任何配置，但是前端服务器需要相应的设置两个字段：

  • Cache-Control：用于控制文件在本地缓存有效时长。
  • Last-Modified：标识文件在服务器上的最新更新时间

该模式下应用场景：
缓存静态文件，比如图片、CSS、JS、字体等

优点：

  • 支持 Http协议层

缺点：

  • 缓存文件需要首次加载后才会产生
  • 浏览器缓存的存储空间有限，缓存有被清除的可能
  • 缓存的文件没有校验

深入学习WebViewClient

深入学习WebChromeClient

孤独浪人1
关注
专栏目录
Qt开发经验总结
草上爬的博客
12-02 8216
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Android 原生开发、H5、React-Native使用利弊和场景技术分享
zhangxinjin的博客
06-28 1万+
最近工作中接触到React-Native框架，对其进行一些技术分析，结合之前了解的H5的一部分，加上自己做了很久的原生开发（十几个android app、sdk，包括2个ios）, 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围，作为个人知识的记录，也作作为公司内部互相学习的分享。 一、原生开发          原生开发是系统自带的app开发方式，也是大部分人最熟
用原生webView开发的安卓壳子
06-27
用原生webView开发的安卓壳子
安卓 设置页面为URL地址
linpiaohsin的博客
12-09 1207
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = (WebView) findViewById(R.id.webView);
使用pywebview套壳odoo
最新发布
XKPP023的博客
07-01 1209
win10平台下使用pywebview套壳odoo，pyinstaller打包成exe。
webview和android做壳,Android Studio 制作一个 WebView 外壳
weixin_34177601的博客
05-26 422
背景做为一条BS狗，开发应用当然趋向于BS，为了方便维护，降低开发成本，决定只做一个webview做为程序入口，所有的功能页面集中在服务端。本次踩坑遇到了 js不支持、点击返回直接退出应用、https/http混杂模式不支持等小坑，具体解决全部都在下面的代码中，请各位看官慢用。工具Android Studio3.2过程1、新建一个FullScreen项目，命名为GodOne2、应用配置：app/m...
使用webview来做一个h5页面的安卓端外壳
emmmmm
01-09 6735
使用webview来做一个h5页面的安卓端外壳 之前工作上需要做一个安卓端来加载项目里写的h5页面,主要思路就是使用webview进行加载页面,而一些原生的操作如打开相册、打开相机、扫描二维码等通过安卓端完成。东西很少，大多数都是网络上的demo集成的。 代码块 通过这个LoadActivity 完成大部分操作： public class LoadActivity extends
Hybrid App 开发快速指南
热门推荐
GitChat
08-14 4万+
课程背景 混合应用相对于原生应用而言，是原生应用和 Web 应用的结合体。过去几年，混合应用开发的各种利弊已得到充分的讨论和验证。关于混合应用是什么、为什么使用的问题，相信大家都有自己的答案，但如何开发混合应用，从现有资料中却很难找到一个系统、全面的回答。 刚上手或准备上手混合应用的开发者，经常苦于没有一套经过验证的最佳实践来指导开发，在开发的各个阶段往往遇到各种问题： 如何选型？ 如何架构前端...
WMRouter：美团外卖Android开源路由框架(1)
2401_84123265的博客
04-18 367
目前业界已有的一些Android路由框架，不能满足外卖C端App在开发过程中的实际需要，因此我们开发了WMRouter路由框架。借鉴网络请求的思想，设计了基于UriRequest、UriHandler、UriInterceptor的URI分发机制，在保证功能灵活强大的同时，又尽可能的降低了使用难度；另一方面，借鉴SPI的设计思想、Java和美团平台的ServiceLoader实现，开发了自己的ServiceLoader模块，解决外卖平台化过程中的四个问题（通信问题、复用问题、依赖注入、编译问题）。
Python Appium自动化测试 Capability
kami_ochin_akane的博客
11-16 360
Time will tell. 前面我们写了很多实例代码，也可以发现，有一部分代码总是重复出现在你的视线中，这部分就是对 Capability 的配置。 Capability 又叫Appium Desired Capabilities 。那么本章就来介绍讲解一下 Capability 。 1、 Capability 介绍 不知你是否还记得在讲log 时，看过的启动时日志？在整个启动日志中会出现一些配置信息，其实那些信息就是capability携带的配置信息，通过代码启动，我们能够看见的配置信息如下： .
Android应用源码适合做套壳的简易浏览器
07-29
本例子是一个简单的安卓浏览器项目源码，如果你已经搭建了一个适合手机浏览的服务端网站比如公司主页等，完全可以把这个源码当作外壳来做一个属于自己的“套壳客户端”，也就是套着安卓客户端的壳子实际上是放了一个浏览器用来直接浏览web内容，点击手机的物理返回键可以返回到上一次浏览的界面。源码有比较丰富的注释，比较适合用来学习WebView控件使用或者做一个简单的客户端，第一次自动打开的页面和点击右上角小房子按钮转转跳到的链接都可以在MainActivity里面指定，其他情况看截图或者看源码吧，编译版本4.0.3编码GBK
给Web套个壳让它变成Android APP源码和教程下载
01-25
方便站长和个人爱好者，制作自己的网站app，快速直接的访问自己喜欢的网站。
基于CEF的web单页应用的桌面外壳
01-03
这个是一款基于cef的web单页应用桌面外壳，解压后，只需要把dist下的换成一套web离线文件，就可以点击exe访问了。 帮助快速开发桌面应用。技术联系：微信：lovebugs1114
webapp开发教程之将html网页打包成app的4种方法.zip俗称套壳_html5移动web开发
01-14
webapp开发教程之将html网页打包成app的4种方法.zip
Android 原生webApp的运行壳
01-17
Android 原生webApp的运行壳，有了这个壳，只需要配置入口的webApp路径，用网页写的App就能通过JavaScript调用Android的接口（如定位等），用户几乎感觉不出任何差异。
给WEB网页套上一个壳，变身APP
peakchao
01-29 1万+
最近打算写一些前端网页，为了方便查阅，突发奇想，将前端网页嵌套在APP内部，而APP可以安装在手机，岂不是可以随时查阅了么，比如自己写的博客，让它成为一个独立的APP安装在手机上，岂不是锦上添花？ 1.仓库地址 2.克隆代码(建议直接从仓库fork)： git clone https://gitee.com/Chaoc/PeakWebApp.git 3.修改个人配置： #打开项目根目录下conf...
一次安卓WebView套壳应用开发记录
jimson_zhu的博客
02-10 1957
一次安卓WebView套壳应用开发记录。
用HBuilder把web应用套壳成app
rnyuan的博客
10-11 669
首先下载HBuilder 下载全版本的！！ 然后创建个新项目 这种的可以让我们编写js+html 简单的ajax就可以变成app，上手完全没难度 他会有一个实例，你可以直接打包，然后测试下功能，看看怎么实现的 HBuilderJS+HTML+ajax实例_Hbulider单独写JS-Javascript代码类资源-CSDN下载这个是我写的用ajax调取后台接口 用内网穿透测了下，完全没毛病，安卓和ios完美运行， ...
uniapp使用webview套壳开发的安卓app 使用扫码功能
07-14
你可以在Uniapp中使用Webview套壳开发安卓App，并且使用扫码功能。下面是一些步骤可以帮助你实现这个功能： 1. 在Uniapp项目中创建一个新的页面，用于展示扫码结果。 2. 在这个页面中，使用uni-app提供的webview...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值