一篇文章瞭解JsBridge

wendux發表於2018-02-27

什麼是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,不能多年辛苦無人知啊,哈哈。

相關文章