一篇文章瞭解JsBridge之IOS篇

wendux發表於2019-03-04

之前釋出在掘金Android欄目下的文章“一篇文章瞭解Js Bridge”受到了較多的反饋,本文在該文章的基礎上,新增了一些針對IOS平臺下的一些問題的討論。

什麼是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?

什麼是好的JSBridge?

可用性

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

健壯性

所謂健壯就是經得住考驗,bug少、相容性好、在各種情況下都能穩定執行。然而,可怕的事,現有的知名開源jsbridge 質量都存在著嚴重問題,現在Github上一個上萬star的IOS平臺下的開源JS Bridge專案 marcuswestin/WebViewJavascriptBridge ,縱觀其issue列表,也是各種各樣的問題反饋。

Android 方面問題更多,下面是我在兩個知名Android JS Bridge開源庫下提的問題:

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

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

跨平臺

為了保證同一份Javascript程式碼既能同時在Android和IOS下正常執行,那麼好的JavaScript Bridge 應該要能跨平臺,這樣才能保證在Android和IOS和H5通訊協議一致。然而,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 存在任意程式碼執行漏洞,這就會導致嚴重的安全問題。

在IOS下 UIWebView 存在跨域訪問漏洞,成功利用該漏洞的攻擊者可以遠端獲取手機應用沙盒內所有本地檔案系統內容,包括瀏覽器的Cookies、使用者的配置檔案、文件等敏感資訊。而WKWebView可通過手動設定是否允許“file://”域發起跨域請求。

效能

對於IOS來說,WKWebView 在開啟頁面速度和資源消耗方面比UIWebView 要好的多,蘋果對UIWebView記憶體洩露問題一直沒有很好的解決,現在蘋果官方已經廢棄UIWebView,開發者是時候使用WKWebView了。

使用簡單

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

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

考慮到安全和效能問題,DSBridge v3.0.0之後只支援WKWebView,而不會再支援UIWebView。如果您的專案還需要使用UIWebView,請使用DSBridge v2.0.0

當然得給出原始碼地址:

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

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

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

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

相關文章