Android Webview加载游戏踩坑

由于工作的原因,需要在Android WebView上加载游戏展示,在这期间遇见了很多相关的坑,在此集中下。本文长期更新,欢迎批评指正。

Android Webview 进程内共享

在不考虑多进程的情况下,一个App打开后使用的Webview使用的是同一个线程(网上名为WebViewCoreThread)。当创建webview实例的时候,会尝试去启动Android 浏览器内核,我们的前端代码是借助他完成渲染的,同时你会发现在开发者选项中你能看见本机的webview版本甚至更换他。

小米上的设置

所以这会带来什么潜在问题呢?如果你的应用内存在多个webview,他们大概率会互相影响,比如resumeTimer和pauseTimer函数是对全局webview生效的

Laya引擎游戏对WebView宽高敏感

经测试发现,laya引擎游戏在小米机型上高发白屏。
原因是在开始加载时将WebView设置为GONE,导致内部获取宽高的时候为0,引擎在绘制的时候出现错误;

解决方法是将GONE改为INVISIABLE,虽然不可见但是宽高measure会进行。

实测同样的设置在cocos游戏上没有问题

WebView低版本带来的各种奇葩问题

在Android 4.4之前渲染内核是WebKit,4.4之后才换成chrome,符合谷歌版本帝的形象,这也造成了在一些低端机和低端版本上webview的表现有差异。在此列举几个:

  1. 页面关闭后还有声音:机型oppo x9s 版本,两种方法解决,一是调用reload方法重新初始化数据,二是调用webview.destroy方法。更推荐后者,谷歌在官方文档中建议在webview从View树移除后调用,会清除webview的网络状态。
Destroys the internal state of this WebView. This method should be called after this WebView has been removed from the view system. No other methods may be called on this WebView after destroy.
  1. 短暂出现游戏声音:这个更偏向于手机系统问题,motox2 机型上灭屏再亮屏(未解锁)会短暂出现游戏声音。这是因为亮屏时就会启动onResume方法,再执行一次onPause方法,应该是对锁屏进行了假处理

WebView js线程卡死导致所有webview白屏

我们知道webview提供了js桥使得js代码能调用Android代码,调用的线程是在webview自己的js线程,如果你尝试在@JavascriptInterface方法中执行耗时中断操作,很可能将此线程搞崩,造成应用内所有webview白屏,所以请避免在方法中使用耗时操作。

WebView内存泄露

此问题也长期排WebView问题的前列,根本原因同第一点WebView进程内共享,一旦你开启了一个WebView,那就别想跑了,不管是webview.destory或者是变量置空都无效。

综合各家观点,有以下几个点:

  1. 使用new WebView来创建而不是xml,这里context建议使用application,使用activity
  2. 销毁时主动getParent.removeView然后调用destory
  3. 反射大法,这里不是很推荐,因为不能确保api以及变量不修改

在一些大厂的WebView策略相关文章中,WebView的销毁被忽略了,是因为销毁这东西得不偿失,主要做好当前页面的资源释放即可,否则WebView的重新启动将十分耗时。

JS方法setTimeOut失效

在游戏引擎(多数前端页面也是)中,setTimeOut被大量使用,他的效果是在单线程js中延时执行结果,但是在合作项目中发现一个很严重的问题,这个方法可能没有回调?

最终原因追踪到了timer,猜测合作方在页面结束时使用了pauseTimers,这个方法是面对全局webview的,所以另外的webview没有执行resumeTimers方法重启js计时器的话,setTimeOut将失效。最终结果将是白屏,pageFinish函数没有被调用,造成整个页面的异常。

在参考文章一中指出:"还有一种情况是在不使用pauseTimers的情况下从Activity返回上一个包含WebView的Activity时setTimeOut是不执行的"这种情况我自己模拟不出来,不知道是否是理解问题。

WebView缓存大坑

这个地方详细起来说完全可以起一系列文章,具体可以参考文章二和三,这里主要讲下自己亲身经历过的。

Android中关于浏览器缓存设置的主要是
getSettings().setCacheMode(),默认是WebSettings.LOAD_LOAD_DEFAULT
这个的意思是完全按照服务端要求来,不加设置

在某些情况下,我们希望能强制刷新,所以可以考虑使用另外一种设置:WebSettings.LOAD_NO_CACHE
这样设置以后会在资源请求头里加上cache-control=no-cache参数,浏览器中

这样一方面是对服务端而言会尽可能的请求所有资源,避免一些缓存不可访问的问题;再者他类似于浏览器的刷新,可以对本地浏览器进行刷新。

综上,在一下情况下可以考虑no-cache:

  1. 对资源高度敏感的情况
  2. 浏览器偶先加载无反应的情况(临时解决方案)

WebView调试大法

很多时候我们的设置不能完全避免一些稀奇古怪的问题,这个时候就需要开启调试了。
为了允许调试,我们需要对webview进行设置:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mWebView.setWebContentsDebuggingEnabled(true);
 }

注意,这个方法一旦开启,应用内的WebView就都开启了

然后用usb连接测试机,进入调试模式,在Chrome中输入

chrome://inspect

然后选择自己的机型,点击具体的webview页面就能进入熟悉的前端调试页面啦

连接成功

这个过程中我的魅族16p会显示404,换一台机子就行了 ,不要迷恋于一只机子。

还有一个比较好用的调试方法,就是代理映射,可以通过charles(or 其他)进行映射,因为很多时候js源码是被压缩过的很难看,这时我们可以通过映射原始版本来进行问题排查,方便很多。

参考文章

  1. Android WebView 全面干货指南
  2. WebView缓存原理分析和应用
  3. 官方文档
  4. qq hybrid优化,可以参考下,但是对于我们这种对外合作的,需要推动前端客户端统一比较困难
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容