Hybrid技術(shù)在Flyme的應(yīng)用實(shí)踐

Hybrid技術(shù)在Flyme的應(yīng)用實(shí)踐BY楊德模2016.12.042011.7-2014.6騰訊WebQQ、Q+、手Q、Q群2014.7-2015.10唯品會(huì)特賣會(huì)移動(dòng)平臺(tái)前端架構(gòu)2015.11-魅族科技，HybridApp架構(gòu)設(shè)計(jì)和落地、前端生態(tài)和基礎(chǔ)設(shè)施建設(shè)/chemdemoAboutme大綱Flymehybrid原有架構(gòu)簡(jiǎn)析通用HybridApp開發(fā)體系的建設(shè)前端工程、組件生態(tài)、工具鏈通訊資源管理性能優(yōu)化HybridAppsonFlymeOSFlymeHybrid原有架構(gòu)流程Flymehybrid原有架構(gòu)改進(jìn)思路問題解決方案代碼復(fù)用模塊化、SDK、前端工程接口設(shè)計(jì)模塊化，優(yōu)雅設(shè)計(jì)訪問url不一致在線和離線均采用唯一urlH5包分發(fā)控制包動(dòng)態(tài)更新接口+push通道H5編譯、打包、發(fā)布自建包管理平臺(tái)+前端工具通用的Hybrid架構(gòu)設(shè)計(jì)理論：https:///chemdemo/chemdemo.github.io/issues/12Android調(diào)用H5通訊——基本原理webview.loadUrl("javascript:alert('helloworld')");Android調(diào)用H5：shouldOverrideUrlLoading@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){//自定義的schemaif(url.indexOf("myschema://")!=-1){...//othercode//返回true則表明webview已經(jīng)“消費(fèi)”了H5的request事件returntrue;}//返回false，webview將用默認(rèn)的方式處理H5的request事件returnfalse;}在SDK內(nèi)部封裝橋協(xié)議約定H5的調(diào)用封裝成以下格式：業(yè)務(wù)層繼承SDK，并根據(jù)實(shí)際需求擴(kuò)展HandlerJSSDK遵循ES6的模塊化寫法，并提供完善的二次編譯打包工具通訊——我們的實(shí)現(xiàn)flyme://[類名]/[方法]?[參數(shù)...]通訊——異步調(diào)用通訊——（回調(diào)）調(diào)用過程HybridSDKAndroidSDKJSSDKAndroidbridgeHybridrouterAPIHandlerJSbridgeHybridAPIEventAPI業(yè)務(wù)apkH5bridgeMonitorTools模塊化的API設(shè)計(jì)文檔和Q&A支持H5作為數(shù)據(jù)接收方按鍵操作硬件狀態(tài)變更客戶端數(shù)據(jù)變更客戶端UI變更未來未知時(shí)刻來自客戶端的數(shù)據(jù)變更mback、其他按鍵網(wǎng)絡(luò)、位置等歌曲播放狀態(tài)變更、登陸掉線等反向通知——事件H5listenkeypressUIstatuschangedatachangedevicestatuschangeandroidnotifyH5callback//H5攔截mback按鍵FlymeJS.on(‘mback’,functionmbackHandler(date){(data)})//客戶端notifyWebview.loadUrl(“javascript:FlymeJS.notify(‘com.meizu.hybrid.event.MBack',

JSON.stringify({value:‘xxx’}))”)相同的資源使用唯一url定位離線文件不存在或過期則走線上基本覆蓋所有H5應(yīng)用場(chǎng)景H5資源訪問H5資源文件打包路徑不受約束，根據(jù)正則規(guī)則將線上url匹配離線文件客戶端實(shí)現(xiàn)路徑重定向、重寫等功能資源定位規(guī)則"routes":[{"regex":"http:///(.+)","result":"http:///$1","rule":"replace"},{"regex":"http://h(\\d+)./(.+)","result":"http:///$2","rule":"override"}]離線訪問方案原理優(yōu)點(diǎn)缺點(diǎn)Web緩存HTTP頭純Web方案，簡(jiǎn)單偽離線無網(wǎng)不可用manifestHTML5新接口純Web方案，簡(jiǎn)單更新有坑離線包請(qǐng)求攔截+本地替換無網(wǎng)可用，資源易于控制需要后臺(tái)、客戶端等資源和人力的配合CacheAPIW3C新草案純web方案，可實(shí)現(xiàn)更細(xì)粒度地定制資源更新依賴ServiceWorker，兩者皆不成熟，webview兼容問題幾種Web緩存方案對(duì)比托管H5離線包，前端只需要輕量的包管理CI、測(cè)試、灰度、發(fā)布一體化版本管理、增量對(duì)比本地資源包更新檢查接口靜默更新（服務(wù)端主動(dòng)推送）資源包管理平臺(tái)設(shè)計(jì)資源包管理平臺(tái)輕量的H5離線包托管平臺(tái)待發(fā)包測(cè)試離線包分發(fā)控制多種灰度方式，更精確地控制離線資源更新范圍離線包更新流程上傳測(cè)試包時(shí)同時(shí)自動(dòng)生成增量包更新時(shí)同時(shí)返回增量和全量包地址增量包在客戶端進(jìn)行hash校驗(yàn)防篡改文件級(jí)別的增量diff離線包瘦身——增量包同一個(gè)apk內(nèi)的H5按功能分為多個(gè)模塊模塊之間的更新頻率不同生成離線包時(shí)只打包改動(dòng)的模塊進(jìn)行更新在客戶端合并多包離線包瘦身——拆包離線包規(guī)范私有npm倉(cāng)庫(kù)——cnpm基于React的一系列前端組件遵循ES6模塊化標(biāo)準(zhǔn)組件publish約定前端組件生態(tài)工具前端工具鏈生成項(xiàng)目模板集成前端開發(fā)環(huán)境跨平臺(tái)命令zip、md5、rm等通用數(shù)據(jù)mock平臺(tái)重寫npminstall逐漸完善的工具鏈FlymeHybrid體系（類）Hybrid開發(fā)方案對(duì)比方案原理優(yōu)點(diǎn)缺點(diǎn)適用范圍ReactNative/Weexjs書寫原生代碼運(yùn)行高性能、跨平臺(tái)接入門檻高大公司、創(chuàng)業(yè)團(tuán)隊(duì)Hybrid定制且易擴(kuò)展的