QQ邮箱iPhone版 — 混搭式开发的尝试

2011-10-25

QQ邮箱iPhone版开发了几个月,多次延迟发布,过程十分艰辛。这是第一次尝试混搭的开发方式,即整个应用主要由web组成,APP给web套上一个壳并提供一些原生的接口,以达到更好的体验。我们使用了开源的PhoneGap框架,但其实到后来已经可以抛弃它了,没用它多少接口,自己实现一下也只是时间的问题。

总体

整个APP主要是以下三点:

  1. APP由js驱动,与手机邮箱触屏版/ipad版使用同一套逻辑,同样的M层,架构一致。
  2. 由APP客户端提供绘制头尾以及动画切换的接口,由js调用。
  3. 使用HTML5的sqlite/localstorage缓存数据,applicationCache缓存静态文件和页面。

加上各种细节,就可以构建一个仿原生应用了。

问题

实际上说得简单,做起来难,碰到很多问题。

性能

DOM的性能差,渲染速度慢,最初在各个模块之间切换时速度不能忍受,经过各种优化后情况才好转。优化包括:去除所有高级CSS特性,例如阴影渐变等,减少list默认显示条数,缓存DOM,APP头尾控件缓存,APP动画拍照优化。即使经过很多优化,目前性能上还是跟原生APP有所差距。这种差距目前来看只能等待硬件升级。其实在未做任何优化前,在mac的模拟器上体验已经很好了,无性能问题,因为mac的硬件够好。

manifest

applicationCache的manifest是个令人头痛的东西,项目过程中几度出问题。它最大的不足在于不能清空缓存,一旦使用了它,将很难抛弃它,只能更新,不能抛弃。造成的问题是,manifest更新时,拉取新的资源文件,一旦主页面在后台输出的是个不正确的页面,被缓存起来了,就万劫不复,再也无法进入应用了,因为没有机会再次取拉正确的页面了。所以要使用它,需要强力保证主页面绝不会输出错误,最好是个静态页面。

此外用manifest还要非常细心。项目过程中有两次出现突然无法离线的情况。一次是manifest针对高清屏输出的文件有个地方没换行,导致缓存无效。很难看出它没换行,因为manifest文件是套模板的,模板上是有换行的,转完输出就没有了。只针对高清屏错误就导致模拟器和iphone3都没问题,只有iphone4有问题。折腾这个诡异的问题半天。另一次是写在APP里的启动网址参数里多了个’s’,导致打开的页面跟缓存的页面不一致,很难发现,也查了挺久。

JS-APP不同步

APP提供了绘制头部底部的接口,何时绘制以及绘制什么由JS控制。模块的切换会有动画效果,在js调用模块切换时,先拍照,再画头画底,再回调开始动画的事件,JS渲染自身的dom,动画切过去,整个流程挺简单挺清晰,但实际会有各种问题出现。

在初期经常出现APP头尾和模块内容不一致的问题,由各种原因导致,可能在切换模块整个流程没结束时马上又切换模块了,或者再调一次画头尾,会打乱流程。这通过APP那边把命令加入一个队列顺序执行,并且在动画过程不响应事件来解决。

登录问题

由于历史问题,登录没有使用ajax,整个应用不可避免地需要页面跳转,这会导致非常多的问题:
1.在某些网速非常慢的情况下,整个应用白屏无法避免,因为在跳转了页面并且页面还未载入时,必然会先出现一个空白页面。
2.登录的loading菊花卡住不转,因为跳转了页面本页面的无论是gif还是canvas都停止运行了。
3.一旦出现运营商劫持/wifi验证页面,整个应用就会调转到这个页面去,完蛋了。这个后来通过把表单提交到iframe解决。
所以,最好不要出现跳转页面的情况,必须整个应用在一个页面里。

沟通成本

本来一个iPhone APP的开发链就是,UI-客户端-后台,加入js后,多了js与客户端沟通的成本。而在这种开发模式不成熟的时候,这个沟通成本挺大。另外在APP出问题的时候,有时挺难判断是js的问题还是客户端的问题。

由于APP介入了表现层,进入JS的逻辑,所以必须对APP和JS两端都熟悉了解,才能掌握整个流程。之前不清楚为什么phoneGap不推出这个固定画头画底的接口,这是所有APP必备而在web上实现性能又很差的东西。现在知道这会使APP变复杂,phoneGap只提供功能接口,作为后台角色,其他全交给JS,不需要与APP进行过多的沟通。

webView/网络

出现了一些问题我们还没弄清除是不是webView的问题,例如,记住cookie的问题,登陆过后是设了cookie的,但如果这时马上退出,下次进来就不会有cookie,如果是隔个二三十秒过后再退出,cookie就能记住。非常奇怪的行为,对此我们只能打个补丁,把某些cookie存到localstorage,下次进来如果没有cookie就从localstorage里取,这个方案还依赖了mainifest。

另一个是APP环境改变时ajax的行为问题,在请求或者上传时,APP切换到后台,APP切换网络,APP切换到后台长时间不用再打开,APP终止webView的请求,都会由可能导致ajax卡死,无onsuccess或onerror的callback,有时还会导致JS被阻塞,接下来无法正常响应请求。这是我们框架的缘故,还是webView的缘故,还待查。

好处

与纯原生APP比,它是有带来一些好处的。

  1. 云端升级:应用的某些升级无需通过AppStore,无需用户下载安装,可以快速迭代。
  2. 代码复用:触屏版/ipad版的多数代码可以复用或者共用,降低开发成本,提高开发速度。
  3. 跨平台:我们暂时没用到这个好处。若要跨平台,数据层没问题,VC层还是有很多的不同。

总结

混搭的开发方式,APP最好不要参与到表现层的东西,只提供必须的功能接口,否则js与APP一起管理整个表现,会导致复杂度增加,开发困难。但目前没办法,可能走得有点快,就目前来说,纯web的表现还与APP的差距甚大,必须借助APP的力量,像最基本的头尾固定,只能由APP来展现。

目前iOS5的浏览器支持了position:fixed属性,可以在屏幕上固定元素,支持-webkit-overflow-scrolling: touch,可以原生支持对区域滚动,就具备了使用纯web实现目前的体验的基础。等接口提供再加上硬件不断加强,性能上的差距也会缩小,等市面最低版本是iOS5了,硬件都升级了,web主导的这类应用估计会多些。

分类:技术文章 Tags:
评论

*

*

2011年10月25日 23:42

实习时候参与的QQ团购App起初是用纯Web做的,也是遇到了不少问题,现在也采用了混搭方式。
有机会要交流一下。

2011年10月26日 9:04

呵呵,我们的团购混合App也在提测了,估计很多问题都是大家都遇到过的。多多交流

2012年12月19日 9:49

你好,我做的应用也是采取混搭方式,现在遇到了点问题:应用怎样由html页面切换成本地xib视图,再由xib视图切回之前的html页面呢?不知你在做应用过程中遇到这个问题了没有,所以想向你请教一下

2013年3月27日 0:45

你好,请问你现在这个问题如何解决的呢?

2013年3月27日 0:51

你好,我已经搞定了。自定义plugin就实现了,我参考了这些资料:
1)http://www.cocoachina.com/bbs/read.php?tid-59752-keyword-phonegap.html
2)http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-ios.html

[…] 回答:有的,之前QQ邮箱iphone版就是套了个壳实现的。用phonegap开发的好处和缺点这个童鞋的blog有介绍。QQ邮箱iPhone版 […]

2013年5月9日 16:19

博主你好
无意中进入你的微博,看到这篇文章,感到有点唏嘘
我们现在团队在开发一个企业邮箱客户端,参考的对象之一就是QQ邮箱的实现
我们做得还算顺利,大家都觉得QQ邮箱做的真不错,简洁。赞一个。
我是负责写邮件模块的,所以一直比较好奇,QQ邮箱写邮件的页面是大概怎么实现的,有没有用第三方的控件呢,比如那个tokenfield之类的

[…] 回答:有的,之前QQ邮箱iphone版就是套了个壳实现的。用phonegap开发的好处和缺点这个童鞋的blog有介绍。QQ邮箱iPhone版 回答:今天看了下网易blog 也是native html5混搭。速度在我的手机上还行啊。 但是我自己的应用就有些卡。滑动部分用的iscroll4. 估计这个东西在安卓低端机上运行就不行。。。。。 回答:HTML5打造Web版PSOld School Cassette Player with HTML5 AudioHTML5G重磅推荐:Contre Jour For HTML5你看看 本条目发布于 2013 年 5 月 9 日。属于 web前端开发 分类。作者是 admin。 […]

2013年5月9日 16:32

没有用其他控件,现在的Q邮箱都是原生的了