混合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+原生混合框架綜合了兩者的優勢，既可以快速迭代發布還可以充分使用手機底層設備功能。采用雙重緩存+異步刷新技術，用戶感知提升明顯。這兩項關鍵技術具有很好的通用性和可復制性。