Hybrid App 跨平臺熱更新方案實踐 附帶源碼

前言

移動開發的跨平臺與快速發佈一直是開發者的追求，也是技術的一個發展趨勢，如今各大廠開始有了本身的大前端團隊，因此咱們也開始了本身的探索，目前來講主要有兩種思路：

• Hybrid App 表明:Cordova
  經過Webview加載Web頁面，在Native和Web頁面之間創建雙向通訊
• H5代碼Native化 表明:ReactNative,Weex等
  使用各平臺Api，把H5代碼編譯成二進制代碼直接運行

其實關於這兩種思路對比，網上有不少大牛分析的很全面了，總結來講各有利弊很難完美，本篇文章咱們主要講一下Hybrid App實踐，採用先後端分離以及單頁應用技術開發Web頁面，使用WebView加載Web頁面，並經過JS通訊提供一些Native層的支持，經過接口獲取差別化頁面資源文件，在本地整合更新，還能夠達到熱更新的需求。在我看來此方案更適用於須要快速發佈、多端兼容、對性能要求稍低的業務，正好符合咱們的需求。

源碼

這裏我整理了Android端會用到代碼，包含JS通訊，文件處理工具類，閃屏輔助類和WebView的封裝。
Github地址：github.com/free46000/H…，請你們多多關注，因爲源碼並無完善，因此暫時沒有發佈到Maven倉庫

方案詳解

既然肯定了方向，那麼就應該肯定具體的方案了，經過本身的經驗和網上資料整理，畫了時序圖：

image

按照圖上的時序，接下來講一下每一步中的實踐，以及碰到的坑。下面講解

初次安裝

• 打包
  在打包程序時這一步主要是把Html相關資源文件壓縮後放在assets文件夾下便可
• 安裝
  用戶安裝完應用程序打開後，檢測是否爲初次使用，若是是則經過程序直接解壓包內資源到手機存儲上便可，不侷限於SD卡。

展現頁面

• 閃屏頁展現
  因爲上面的解壓資源，還有Webview初始化、JS的加載執行、html的渲染都是耗時操做，而且都是發生在Html展現以前，因此咱們選擇把閃屏頁用Native原生代碼來編寫，採用覆蓋WebView所在頁面的方案，這樣在閃屏頁隱藏的時候，用戶就能夠看到業務界面，提高用戶體驗。
  注：另外提供Android兩種閃屏優化的小技巧，使用透明主題或者設置主題背景圖片

• 加載本地Html頁面
  直接使用WebView#loadUrl()加載本地資源文件便可。因爲WebView加載不一樣頁面會出現閃屏的問題，因此咱們採用Vue + Vue Router構建單頁應用。
  這裏Vue Router會有一個小坑，提醒你們注意一下：Vue Router默認採用hash模式，會有一個醜陋的#符號，做爲一個有追求的程序員怎麼能容許這種很醜的hash，一種更優雅的方式使用HTML5 History模式，可是不幸的是，加載本地資源文件的方式並不能正常解析HTML5 History模式的url，因此只能採用hash模式。

• 數據請求
  爲了節省用戶的流量和時間，須要把Html資源文件存儲在本地，這樣數據的請求必須在客戶端完成。有兩種方案供選擇：
  一是Native層攔截並請求數據再返回給Html層去展現，這樣會增長工做量，也不利於職責的分離，因此放棄。
  二是直接使用JS請求數據，這樣會出現跨域訪問的問題，相比較來講仍是這個比較容易解決的，採用CORS便可

• Native調用JS
  Native層調用JS比較簡單，執行一段JS代碼便可，如：javascript:callJS()

• JS調用Native
  JS層調用Native,在Android上來講主要分爲三種：
  一：經過WebView#addJavascriptInterface()進行映射，使用起來簡單，可是有安全風險，棄用
  二：自定義協議而後由Native層攔截並解析請求，使用起來複雜，容易和業務耦合，也不是最優選，棄用
  三：攔截JS#prompt()方法並解析，使用起來複雜，可是比第一種更安全，比第二種靈活，因此使用此方案

資源文件獲取

資源文件採起差別化更新方案，本地存儲一個標識，能夠爲版本號或者更新時間，這個能夠和後端同窗一塊兒商量肯定。
資源文件下載還有推送之類的因爲Html的侷限性，因此仍是直接由Native層作比較合適，下面簡單講解下應用中的兩種更新方式：

• 服務端推送下發
  能夠經過集成第三方的推送服務，在客戶端收到更新推送後主動去請求下載差別化文件
• 主動請求
  能夠在選擇合適的時機，如在應用啓動時去請求差別化文件

資源文件更新

根據差別化清單對資源文件進行整合，存放在臨時目錄中，而後在第二次打開應用時更換，並展現更新後的界面，達到熱更新的效果。

總結

本文只是歸納的講告終構的內容，可能會遺漏一些要點，若是你們有什麼問題歡迎留言或者去GitHub上提交issue

做者開源了一個優雅的實現多類型的RecyclerView類庫 支持DataBinding Form表單錄入，跨多個RecyclerView拖動 Github地址：github.com/free46000/M…