解决WebView显示空白问题

时间:2024-03-21 22:26:48

解决混合应用WebView空白问题

写在前面

目前市面上大部分app都采用混合应用的开发模式,可以说是目前的一种主流,一些非主要的功能和一些更新频率较快的页面都会采用web页面来进行开发,可以极大的提高开发效率,同事避免app多次发版审核带来的繁琐。

背景

公司为线下销售人员提供的一款功能型app,因目前政策原因,必须添加相关的一些隐私协议、用户协议等。于是公司决定发一个小版本,一番复制粘贴(协议内容),打包,上预发(自测都没自测,因为没有任何功能,但是不建议),然后继续别的项目,等待小版本的上线,结果问题来了。

问题描述

发到预发后简单通过微信和浏览器打开相应的链接,其实都是OK的,但客户端通过WebView打开后,会偶尔出现白屏的情况(在这里说明一下这个白屏的情况是有时正常,有时白屏),测试小姐姐的bug立马给到,但是明明链接页面没有任何问题,有时也会打开,所以基本上断定web端的东西没有任何问题,但是客户端和测试这边都让解决,没办法,抱着学(wo)点(te)知(me)识(de)的态度看一下好了。

解决过程

1、首先怀疑是网络原因,因为有时候能打开有时候打不开,所以在自己的服务器写了两个页面,然后让客户端改了WebView的链接地址,结果还是一样的情况。
2、然后怀疑是框架的原因导致某些低版本系统和浏览器识别不了(iOS没有这种情况,只有安卓的某几个手机有,但可以基本肯定不是这个原因,因为之前做过相应配置),于是检查了一下webpack的配置项以及babel的配置项,发现也没有任何问题,然后特意适配了一下安卓低版本,配置如下
解决WebView显示空白问题
解决WebView显示空白问题
问题依然存在,这可就难倒俺了,能想到的基本都想到了。
3、么得办法,只能Chrome。发现有说可能是因为缓存原因。于是让客户端把WebView缓存模式设置为不缓存,同时接受所有安全证书,发现问题OK了。

补充说明

1、导致WebView出现空白的原因(目前确认到的几点,欢迎补充):
a、框架开发的web页面打包的时候,生成的代码不背低版本浏览器所识别,所以需要单独配置,上面有简单配置,可以参考(我们的项目因为一开始做过相应配置,所以是OK的)
b、app的WebView缓存模式开启了缓存模式,可以取消掉缓存模式
c、https安全证书拦截,需要app单独助理,接受所有安全证书

2、马善被人骑,人善被人欺,望各位小伙伴据理力争啊,最后贴一张胜利的图✌️
解决WebView显示空白问题