关于Android设备中,网页端上传操作导致浏览器刷新的问题

在最近的开发过程中,碰到一个比较疑难的bug:当在Android设备的浏览器中打开某张网页时,无论是使用系统自带的浏览器打开,还是用微信扫描二维码打开,网页中的图片上传功能经常会出问题。问题的具体描述为:

  • 在上传组件中(哪怕是最简单的<input type="file">),当选择好本地图片或者调取系统摄像头拍好照片后,网页被刷新。这一问题无法100%重现,但概率不低,在如红米等低端安卓机上发生的概率会比较高。
  • 与用系统自带的浏览器打开的情况相比,在微信中打开的情况下该问题出现的更为频繁。
  • 与选择本地图片上传相比,调取系统摄像头拍照上传的情况下该问题出现的更为频繁。

随便找了两家知名公司的网站(新浪微博、赶集网),在用Android设备访问网页并试图进行图片上传时,都发生了这一问题。

在经过一番搜索和调研后,发现这个问题的原因远比自己想象的要复杂:这是一个由Android操作系统底层设计缺陷所导致的问题,对于Web开发者来说,没有什么办法能真正解决这一bug。

问题原因

事实上,这个问题并不是最近才开始出现的,早在2013年该问题就已报给Android技术团队了(Android issue)。但可惜的是,直至现在Android团队依旧没有正视该问题。导致问题的步骤是这样的(为方便描述,App内嵌的webview也以“浏览器”一词进行表示):

  1. 当在Android的浏览器上调用文件上传功能时,Android系统将把当前进程从“浏览器”切换到“文件选择器”(根据不同的用户选择,这一新的进程可能是图片选择器,也可能是系统摄像头,或者其它别的),此时浏览器进程将变为后台进程。
  2. 由于Android操作系统的设计缺陷,此时浏览器进程的留存优先级(不被系统kill掉的优先级)与所有其它的后台进程是一样的,因此如果操作系统认为内存不足需要进行清理,此时浏览器进程将不会得到任何保护 -- 很不幸,因为浏览器占用内存一般都比较大,所以这次kill操作很容易kill掉浏览器进程。
  3. 当用户选择好图片返回浏览器时,浏览器进程已经不复存在了,按照Android的机制,浏览器进程将进行恢复,试图恢复到kill之前的状态 -- 很不幸,恢复到什么状态是由浏览器来决定的,而浏览器不可能100%恢复到选择文件之前的那个状态。因此最终用户所看到的现象就是:选择文件完成后,浏览器刷新了一下,而刷新到什么状态由浏览器决定。

对于这一问题,Android技术团队的态度是回避(将bug标记为obsolete) -- 可能是因为此bug涉及了OS底层进程切换的机制,修复起来风险太高;而随着手机设备内存容量的增大,这一问题所发生的概率会越来越小。

理解了问题的原因,对问题的一些表征也就有了合理的解释:低端安卓机的内存更小,因此发生问题的频率更高;而与选择本地图片相比,调取系统摄像头所耗的内存更大(当拍摄有大量文字的图片时尤其如此),因此调取摄像头时问题发生的更加频繁;当用户已经开了很多别的App时,问题发生的概率更大。

问题的解决

对于这一问题,真正的解决方法需要对Android的底层细节进行修改,比如定义与当前进程相关联的后台进程,并对这些有关联的后台进程设置高优先级。在Android团队将问题彻底解决之前,这一bug是无解的,但存在一些workaround:

  1. 在上传操作之前,往浏览器里写一个标志性的cookie(或者localStorage等本地存储方案),上传成功后清除该标志位。而在初始加载页面时,判断该标志位是否存在 -- 如果存在,那么就意味着当前的这一次页面加载是由于浏览器进程被kill后重启所导致的。此时可以alert出一些消息,提醒用户内存不足,需要关闭一些别的App。这一方案只能说提升了一些用户体验,无法避免问题的发生;同时,由于部分Android版本的内存优化缺陷,导致在系统内存还有很多的情况下也会启动内存清理操作,使得alert出来的消息对用户造成困扰。
  2. 如果主要场景是在微信中打开的,那么可以尝试使用微信JSSDK中的图片上传接口来完成图片的上传操作。我没有做过严格的测试对比,因此只能做一些猜测:对于JSSDK中的接口,相信微信团队是做了不少测试和修复工作的(比如针对此文所提到的问题,避免切换到外部进程,或者让webview的恢复更加正确),所以采用这一方案该问题的发生概率也许会比较小。但不利的是,调用微信JSSDK所上传的图片会在微信的服务器上暂存3天,因此这一方案不适用于需要上传敏感信息的情况。

除了上述的两种workaround,另外还存在两个替代方案:

  1. 开发Native App。当自己的App进程由于内存清理而被kill掉后,对于恢复阶段要恢复成什么样子,开发人员可以做的会更多。
  2. 限定发布的web服务所支持的手机范围为iPhone和内存较多的中高端Android机型

很遗憾,这一问题没有很好的解决方案,既有的workaround要么隐私性上有问题(也不确定到底会有多大的改善),要么基本于事无补。Web项目开发能做的,也就只能是从设计上尽量减少图片上传操作了。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!