如何打造一个高性能Hybrid App?

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看161 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 161|回复: 2
收起左侧

如何打造一个高性能Hybrid App?

[复制链接]
apper 发表于 2016-7-25 18:04:14 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

0、引言

在多元化的今天,一个热门的移动app,或多或少都会有内在H5在其中。而对于一个有很多运营场景的app来说,这种情况更常见了。试想一下,如果在一个公司,存在很多native和H5同时需要开发的页面,为了节省开发成本,此时如果只开发H5,就需要考虑native的体验了,而这就是本文的目的,如何让native端拥有像加载本地页面一样的速度去加载H5。


在app内加载H5速度慢一直是客户端开发的痛点,抛开H5的体验本身与native就有差距不说,如果加载速度还很慢,这将会对用户体验造成巨大影响。那么像做到像native页面一样瞬间加载完H5,思路就会变得比较清晰了——提前在本地存储远程资源包




1、方案选择

从这个点出发,我们需要考虑,以怎样的形式来提前拿到资源包(css,js,html,通用的图片等),减少这些静态资源的网络请求,增加加载速度。无非就是一下两点:

  • 将资源包在app打包阶段直接植入
  • 在运行时动态下载资源包


单纯从业务层来说,如果你的业务够简单,其实第一种方式已经完全满足,每次需要新增页面就重新发版嘛,虽然显得有点愚笨,但是还是能满足的。

但是从长远的角度来说,我们要做到尽可能的动态化,动态化是客户端的热点,我们要做到尽量不依赖于版本更新来实现动态化。对于iOS来说,更新机制本身就非常缓慢,要通过app store的审核有时候还需要靠人品,更何况用户也不一定买账,他们不一定会更新我们的app。在这样的情况下,第二种方案就会显得更加友好。




2、设计加载流程

那么,该怎么设计一套完整的解决方案来满足运行时动态下载资源包呢。

抽出细节,大体上可以归结为下图所示的结构图:

如何打造一个高性能Hybrid App? 1

如何打造一个高性能Hybrid App? - 敏捷大拇指 - 如何打造一个高性能Hybrid App? 1

app与服务端交互

我来解释下这个图,我是建立在客户端已经实现socket层协议,所以能与server保持长连接以至于server能主动push数据的情况,实现这种协议蛮复杂的。实际上如果没有这个协议,那就需要client找时机主动去server请求(app启动时请求一次?或者是每隔一段时间请求一次,取决于你),本文以后者为例。

下面我来演示下一个完整的下载新资源包的过程:

1.运营小妹觉得某节日要到了,需要发布一个新的页面,然后在运营后台生成资源包,运营后台会自动更新config,其中包括资源包的version,是否强制关闭加载本地资源包(降级策略,防止这个组件本身有BUG),还有一些hotpatch脚本。并且将资源包根据里面的内容部署到remote database。

2.在合适的时机,client发起http请求向server查询是否有新版本的资源包,并带上本地的config。

3.server根据config里的选项,比对从client拿到的config,发现客户端是旧版本的config,OK,则下发新的config给client,并且发送从database里拿到的资源包(为了加快速度,可以部署到CDN)。

4.client拿到最新的资源包后,在本地进行解密,解压等操作,并映射成对应ULR相对于本地的local file url。比如:http://www.swifthumb.com这个网址下的静态资源文件在本地的的file://dsalkfjsldfjalsd/目录下。

至此,已经完成资源包的下载。




3、拦截并加载本地资源包

那么有了资源包后,怎么能让app像native页面的速度去加载H5呢。

其实原理就是对H5请求进行拦截,如果本地已经有对应的静态资源文件,则直接加载,这样就能达到“秒开”webview的效果。

对于iOS而言,这就需要用到NSURLProtocol这个神器了。接下来,分析下它到底是什么东西,我们怎么利用它达到上述效果。

NSURLProtocol能够让你去重新定义苹果的URL加载系统(URL Loading System)的行为,URL Loading System里有许多类用于处理URL请求,比如NSURL,NSURLRequest,NSURLConnection和NSURLSession等。当URL Loading System使用NSURLRequest去获取资源的时候,它会创建一个NSURLProtocol子类的实例,你不应该直接实例化一个NSURLProtocol,NSURLProtocol看起来像是一个协议,但其实这是一个类,而且必须使用该类的子类,并且需要被注册。                                       

——从网上拷贝的


换句话说,NSURLProtocol能拦截所有当前app下的网络请求,并且能自定义地进行处理。

废物不多说,上代码:

如何打造一个高性能Hybrid App? 2

如何打造一个高性能Hybrid App? - 敏捷大拇指 - 如何打造一个高性能Hybrid App? 2

NSURLProtocol的子类

这里只介绍与我们需求相关的NSURLProtocol方法。

搞了这么多,其实最核心的就是前四个方法:


3.1、方法1

[Objective-C] 纯文本查看 复制代码
+ (BOOL)canInitWithRequest:(NSURLRequest *)request


这个方法的作用是判断当前protocol是否要对这个request进行处理(所有的网络请求都会走到这里,所以我们只需要对我们产生的request进行处理即可)。


3.2、方法2

[Objective-C] 纯文本查看 复制代码
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request


这个方法其实很强大,它可以对request进行预处理,比如对header加一些东西什么的,我们这里没什么要改的,所以直接返回request就好了。


3.3、方法3

[Objective-C] 纯文本查看 复制代码
- (void)startLoading


重点是这个方法,我们这里需要做一件事,就是自己拼装httpResponse,并且返回给url load system,然后到了webview那一层,会收到response,对于webview而言,加载本地和走网络拿到的response是完全一样的。所以上述代码展示了如何拼装一个httpResponse,当组装完成后,需要调用self.client将数据传出去。

何为self.client,这个东西其实就是protocol与url load system交互的一个对象,系统提供给我们的,这样理解就够了。

需要注意的是,细心的读者会看到else里会有一段代码:


3.4、方法4

[Objective-C] 纯文本查看 复制代码
[NSURLProtocol setProperty:@YES forKey:WDHybridResourceProtocolHandledKey inRequest:newRequest];


这个是干什么用的?else的作用是当本地不存在这个文件时,则主动重新发请求,此时又会调用canInitWithRequest,如果不设置flag,则会无限递归了。所以你懂得。

当然,重新发请求自然要实现NSURLConnectionDelegate。




4、总结

至此,如何快速加载H5已经全部介绍完毕。

附上前后加载速度对比:

如何打造一个高性能Hybrid App? 3

如何打造一个高性能Hybrid App? - 敏捷大拇指 - 如何打造一个高性能Hybrid App? 3

加载速度对比




好的,下次再见!

欢迎大家关注微博@kuailejim,我会经常在上面分享一些大家感兴趣的东西。


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

相见不如怀念 发表于 2016-7-26 13:43:04 | 显示全部楼层
这是个问题。。。。
JoyceChu 发表于 2016-7-27 18:17:57 | 显示全部楼层
H5有加载程序呢~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
关闭

站长推荐 上一条 /3 下一条

热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表