一篇文章瞭解JsBridge

wendux發表於2018-02-27
JS

什麼是JSBridge

在大多數APP開發過程中，都會通過H5來實現部分功能，而Hybird APP基本90%以上都是H5。現在很少有純原生的APP。但是，由於H5頁面是內嵌到原生應用的WebView元件（一個瀏覽器核心）中，而手機瀏覽器Javascript引擎是在一個沙箱環境中執行，因此JavaScript的許可權受到嚴格限制，比如沒有本地檔案讀寫許可權、不能使用GPS、不能修改系統配置等。所以，如果JavaScript要用到這些受限的能力時，就需要委託原生去實現，原生完成後，再將結果通知JavaScript，因此，JavaScript和原生之間就需要一個通訊的橋樑，而這個橋樑本質上就是原生的瀏覽器元件（我們統一稱之為WebView）與Javascript 通訊的通道，一般稱為 WebView JavaScript Bridge, 為了簡單，一般簡稱為 JS bridge。需要說明的是，原生不僅僅指移動端（Android、IOS）上原生程式碼開發的部分，它也可以是Windows、MAC上的，所以原生一詞主要是為了區分H5，而本文只討論移動端的Js Bridge 。

移動開發的大勢

今年來，動態化是移動開發的主流趨勢，所謂動態化是指可以隨時更新APP的能力，這是為了克服原生應用修改後必須重新發版的天然不足。目前動態化的技術主要有四種：熱補丁、混合開發框架（React-Native、Weex等）、純粹的Web APP、原生加H5（需要經常更新的部分用H5實現）。 其中熱補丁技術主要用於修復一些線上bug，不用於主流開發，當然也有一些基於熱補丁技術的分包動態化方案，本文暫不討論。而剩餘的三種方案，都是通過Javascript 和原生配合實現的，而它們都用到了 JsBridge， 可見使用一個好的Js Bridge的重要性。而不同的混合開發框架、Web APP中Js Bridge的實現和通訊協議都不相同，當然，如果你使用的事這些開發框架，你只需要瞭解相應框架下的通訊協議就行，這沒有什麼問題。 但是，對於採用原生加H5的APP，就需要自己挑選一個合適的Js Bridge了，那麼對於開發者來說，什麼是好的JavaScript Bridge?

什麼是好的JS Bridge？

可用性

能夠滿足通訊需求、功能完善；當然，如果都不能用，還是回家洗洗睡吧~。

健壯性

所謂健壯就是經得住考驗，bug少、相容性好、在各種情況下都能穩定執行。然而，可怕的事，現有的知名開源jsbridge 質量都存在著嚴重問題，下面是我在兩個知名Android JSBridge開源庫下提的問題:

  1. https://github.com/lzyzsd/JsBridge/issues/119
  2. https://github.com/jesse01/WebViewJavascriptBridge/issues/5

可見，要想造一座好橋，還是不容易的。

跨平臺

為了保證同一份Javascript程式碼既能同時在Android和IOS下正常執行，那麼好的JavaScript Bridge 應該要能跨平臺，這樣才能保證在Android和IOS和H5通訊協議一致。然而，目前Github上萬star的 marcuswestin/WebViewJavascriptBridge 官方也只提供了IOS版，儘管有一些第三方Android實現，但大都存在各種各樣的問題，有的存在嚴重bug，如 https://github.com/jesse01/WebViewJavascriptBridge/issues/5 , 有的和IOS版差別太大，如 https://github.com/fangj/WebViewJavascriptBridge 。

安全

安全是很重要的，現在有些Android實現中使用了 webview.addJavascriptInterface ，而在Android 4.2.2之前， webview.addJavascriptInterface 存在任意程式碼執行漏洞，這就會導致嚴重的安全問題。

使用簡單

一個好東西應該是用起來簡單的。

對於JS Bridge來說，使用簡單應該包括三個端：Android、IOS、 JavaScript， 也就是說無論對於哪個端，用起來要足夠的簡單，這很重要，這樣可以避免大量的原生開發和前端開發的撕逼。

強大

在滿足可用性和使用簡單的基礎上，功能要儘可能強大。現在的很多實現，基本上只滿足了可用性，而功能方面都比較弱，比如：

  1. 不支援檢測是否存在某個API的方法；有時隨著版本迭代不確定某個版本下是否存在某個Native或Javascript方法（在版本迭代過程中一些是新新增的）。
  2. 不支援進度回撥；現有JS Bridge基本都只支援一次呼叫一次返回，但是有些時候，如js呼叫原生下載檔案功能的方法時，原生需要在下載過程中將下載進度不停返回給js。
  3. 不支援API管理；現有JS Bridge註冊API時基本都是每個API都需要單獨註冊，這樣在API多的情況下，不僅使用回非常麻煩，也不利於API分類管理。

福音

我給大家捅破了現實，也必須為大家重塑希望！聽不懂？那簡單來說，就是前面都是鋪墊，下面才是真正目的！

那麼到底有沒有一個可用、健壯、跨平臺、安全、使用簡單、強大的現成的JS Bridge?

哈哈，當然是有的， 經過我通宵達旦、四處瀏覽、嘔心瀝血、廢寢忘食，終於創造了這麼一個健壯、跨平臺、安全、使用簡單、強大的JS Bridge，那就是DSBridge，它有如下特點：

  1. Android、IOS、Javascript 三端易用，輕量且強大、安全且健壯。
  2. 同時支援同步呼叫和非同步呼叫
  3. 支援以類的方式集中統一管理API
  4. 支援API名稱空間
  5. 支援除錯模式
  6. 支援API存在性檢測
  7. 支援進度回撥：一次呼叫，多次返回
  8. 支援Javascript關閉頁面事件回撥
  9. 支援Javascript 模態/非模態對話方塊
  10. 支援騰訊X5核心

當然得給出原始碼地址：

DSBridge for IOS：github.com/wendux/DSBr…

DSBridge for Android: github.com/wendux/DSBr…

詳情請參考Github文件，都有中文哦。

最後，如果你喜歡DSBridge， 歡迎star，不能多年辛苦無人知啊，哈哈。

相關文章