混合APP模式、双重缓存+异步刷新技术在中国电信集约星级服务中的应用

曹建华，朱若灵，李烜焱

（中国电信集团客服运营支撑中心，上海 200041）

1 研究背景

星级服务是中国电信在原有VIP服务体系的基础上，升级和优化后推出的全新服务体系。中国电信向"消费稳定、网龄长且信用记录良好"的优质客户授予相应星级，同时提供积分倍增、10000号优先接入等一系列差异化服务。

为服务好星级客户，中国电信建设了集约的星级客户权益行权平台（简称集约星级服务），通过APP、微信公众号等互联网渠道提供向星级客户提供服务。集约星级服务需要解决两个关键问题：

（1）用户服务界面的快速迭代与APP版本更新频率之间的矛盾。

（2）用户服务界面的快速响应与复杂的业务逻辑处理耗时之间的矛盾。

本文重点介绍这两个问题的技术解决方案和达到的效果。

2 应用混合APP开发模式

2.1 混合APP开发模式优点

手机APP开发有两类主流的技术，分别是Native App（原生App）和Web App。由于集约星级服务用户页面会频繁更新，同时又要使用手机底层设备功能。因此APP中的集约星级服务使用了HTML5+原生的混合框架，H5页面侧重于业务功能实现，原生则提供手机底层的基础能力。该技术综合了H5和原生的优点：

（1）集约星级服务页面具有良好的跨平台性，能很好的兼容APP和微信公众号。

（2）集约星级服务页面不依赖于APP版本的限制，可以实时进行迭代和发布。

（3）APP通过原生技术对底层基础能力进行封装如拍照、分享等，并提供给上层H5页面使用，实现更复杂的业务逻辑。

2.2 原生APP与H5的交互机制

H5页面与原生APP之间的交互机制如下：

下面以星级服务页面实现拍照并获取图片为例说明两者交互机制：

（1）HTML页面调用APP拍照功能

function openCamera（ ）{

window.abilityToOpen.runOnAndroidOpenCamera（）；

}

（2）APP把图片的绝对路径传给Html页面

webView.loadUrl（"javascript：getImagePath（'" + imgFile+ "'）"）；

其中H5页面中getImagePath定义如下：

function getImagePath（path）{

document.getElementById（"imagePath"）.value=path；

}

3 双重缓存和异步刷新技术

作为服务于中国电信高端客户的门户，集约星级服务页面打开要快。由于页面业务逻辑复杂，与后台存在多项数据交互，因此应用了双重缓存+异步刷新技术提升页面加载速率，并保持数据的准实时性。

（1）页面资源缓存并异步刷新：页面被用户首次加载时，图片压缩并转为base64编码连同获取的后台数据存入localStorage中。后续再次被访问时先从localStorage中读取，同时启动异步线程调取后台接口数据与缓存数据进行比对，将变化部分局部刷新并再缓存。

（2）后台数据缓存并异步刷新：后台数据来源于集团企信接口，一次接口请求约耗时1秒。由于客户星级等数据更新频率不高，因此后台获取到这些数据后既返回给前端页面也同时缓存一份至Redis（高性能内存数据库）中，后续再次被请求时直接从Redis缓存读取，接口耗时缩短至100ms以内。同时为保持缓存中数据的准实时性，两次请求间隔时间超过设定的阈值，会启动异步线程调取集团企信数据刷新缓存。具体流程如下：

通过应用双重缓存+异步刷新，页面打开时间缩短至1s以内，又保持了数据的准实时性，用户感知明显提升。

4 技术应用成果与推广价值

集约星级服务采用H5+原生混合框架综合了两者的优势，既可以快速迭代发布还可以充分使用手机底层设备功能。采用双重缓存+异步刷新技术，用户感知提升明显。这两项关键技术具有很好的通用性和可复制性。