Hybrid技術在Flyme的應用實踐BY楊德模2016.12.042011.7-2014.6騰訊WebQQ、Q+、手Q、Q群2014.7-2015.10唯品會特賣會移動平臺前端架構2015.11-魅族科技，HybridApp架構設計和落地、前端生態和基礎設施建設/chemdemoAboutme大綱Flymehybrid原有架構簡析通用HybridApp開發體系的建設前端工程、組件生態、工具鏈通訊資源管理性能優化HybridAppsonFlymeOSFlymeHybrid原有架構流程Flymehybrid原有架構改進思路問題解決方案代碼復用模塊化、SDK、前端工程接口設計模塊化，優雅設計訪問url不一致在線和離線均采用唯一urlH5包分發控制包動態更新接口+push通道H5編譯、打包、發布自建包管理平臺+前端工具通用的Hybrid架構設計理論：https:///chemdemo/chemdemo.github.io/issues/12Android調用H5通訊——基本原理webview.loadUrl("javascript:alert('helloworld')");Android調用H5：shouldOverrideUrlLoading@OverridepublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){//自定義的schemaif(url.indexOf("myschema://")!=-1){...//othercode//返回true則表明webview已經“消費”了H5的request事件returntrue;}//返回false，webview將用默認的方式處理H5的request事件returnfalse;}在SDK內部封裝橋協議約定H5的調用封裝成以下格式：業務層繼承SDK，并根據實際需求擴展HandlerJSSDK遵循ES6的模塊化寫法，并提供完善的二次編譯打包工具通訊——我們的實現flyme://[類名]/[方法]?[參數...]通訊——異步調用通訊——（回調）調用過程HybridSDKAndroidSDKJSSDKAndroidbridgeHybridrouterAPIHandlerJSbridgeHybridAPIEventAPI業務apkH5bridgeMonitorTools模塊化的API設計文檔和Q&A支持H5作為數據接收方按鍵操作硬件狀態變更客戶端數據變更客戶端UI變更未來未知時刻來自客戶端的數據變更mback、其他按鍵網絡、位置等歌曲播放狀態變更、登陸掉線等反向通知——事件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應用場景H5資源訪問H5資源文件打包路徑不受約束，根據正則規則將線上url匹配離線文件客戶端實現路徑重定向、重寫等功能資源定位規則"routes":[{"regex":"http:///(.+)","result":"http:///$1","rule":"replace"},{"regex":"http://h(\\d+)./(.+)","result":"http:///$2","rule":"override"}]離線訪問方案原理優點缺點Web緩存HTTP頭純Web方案，簡單偽離線無網不可用manifestHTML5新接口純Web方案，簡單更新有坑離線包請求攔截+本地替換無網可用，資源易于控制需要后臺、客戶端等資源和人力的配合CacheAPIW3C新草案純web方案，可實現更細粒度地定制資源更新依賴ServiceWorker，兩者皆不成熟，webview兼容問題幾種Web緩存方案對比托管H5離線包，前端只需要輕量的包管理CI、測試、灰度、發布一體化版本管理、增量對比本地資源包更新檢查接口靜默更新（服務端主動推送）資源包管理平臺設計資源包管理平臺輕量的H5離線包托管平臺待發包測試離線包分發控制多種灰度方式，更精確地控制離線資源更新范圍離線包更新流程上傳測試包時同時自動生成增量包更新時同時返回增量和全量包地址增量包在客戶端進行hash校驗防篡改文件級別的增量diff離線包瘦身——增量包同一個apk內的H5按功能分為多個模塊模塊之間的更新頻率不同生成離線包時只打包改動的模塊進行更新在客戶端合并多包離線包瘦身——拆包離線包規范私有npm倉庫——cnpm基于React的一系列前端組件遵循ES6模塊化標準組件publish約定前端組件生態工具前端工具鏈生成項目模板集成前端開發環境跨平臺命令zip、md5、rm等通用數據mock平臺重寫npminstall逐漸完善的工具鏈FlymeHybrid體系（類）Hybrid開發方案對比方案原理優點缺點適用范圍ReactNative/Weexjs書寫原生代碼運行高性能、跨平臺接入門檻高大公司、創業團隊Hybrid定制且易擴展的