The article “An article to understand Js Bridge” published under the Android column of Nuggets has received a lot of feedback. Based on this article, this paper adds some discussions on some issues under the IOS platform.

What is a JSBridge

In most APP development, some functions are implemented through H5, and the Hybird APP is almost 90% H5. There are very few pure native apps out there. However, because H5 pages are built into the native app’s WebView component (a browser kernel), and the mobile browser Javascript engine runs in a sandbox environment, Javascript permissions are severely limited. For example, you cannot read or write local files, use GPS, or modify system configurations. So, if JavaScript wants to use these limited capabilities, it needs to delegate native implementations, and when native implementations are complete, it notifies JavaScript of the results. So, there needs to be a communication bridge between JavaScript and native. This Bridge is essentially the channel through which native browser components (collectively called WebViews) communicate with Javascript. It is generally called the WebView Javascript Bridge, or simply JS Bridge for simplicity. It should be noted that native refers not only to the part of native code development on mobile terminals (Android and IOS), but also to Windows and MAC, so the term native is mainly used to distinguish H5, and this article only discusses Js Bridge on mobile terminals.

The trend of mobile development

This year, the trend in mobile development has been to be dynamic, which is the ability to update apps on the go, in order to overcome the natural deficiency of native apps that have to be reissued after modification. At present, there are four dynamic technologies: hot patches, hybrid development frameworks (React-Native, Weex, etc.), pure Web apps, and Native plus H5 (H5 is used for the parts that need frequent updates). Among them, hot patch technology is mainly used to fix some online bugs and is not used in mainstream development. Of course, there are also some dynamic subcontracting schemes based on hot patch technology, which will not be discussed in this paper. The remaining three solutions are implemented through Javascript and native cooperation, and they all use JsBridge, which shows the importance of using a good JsBridge. Different hybrid development frameworks, Js Bridge implementations and communication protocols in Web Apps are different. Of course, if you use these development frameworks, you just need to understand the communication protocol of the corresponding framework, and there is no problem. However, for apps using native plus H5, you need to choose a suitable Js Bridge, so what is a good JavaScript Bridge for developers?

What is a good JSBridge?

availability

Can meet the communication needs, perfect function; Of course, if it doesn’t work, go home and get some sleep.

Robustness,

The so-called robust is to stand the test, bug less, good compatibility, in a variety of situations can run stably. Terrible thing, however, the existing well-known open source jsbridge there are serious quality problem, now making a tens of thousands of star in the IOS platform open source JS marcuswestin/WebViewJavascriptBridge Bridge project, Throughout its list of issues, there is also a variety of feedback.

Android has even more questions. Here are some of the questions I asked under two well-known Android JS Bridge open source libraries:

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

So it’s not easy to build a good bridge.

cross-platform

To ensure that the same Javascript code runs on both Android and IOS, a good Javascript Bridge should be cross-platform so that it can communicate with H5 protocols on both Android and IOS. Marcuswestin/WebViewJavascriptBridge official, however, also provides the IOS version only, although there are some third-party Android implementation, but most of all kinds of problems, some serious bugs, Such as https://github.com/jesse01/WebViewJavascriptBridge/issues/5, and IOS version of the difference is too big, Such as https://github.com/fangj/WebViewJavascriptBridge.

security

Security is very important, now some Android implementation using webview. AddJavascriptInterface, and in the Android 4.2.2 before webview. AddJavascriptInterface arbitrary code execution vulnerability, This can lead to serious security issues.

Cross-domain access vulnerability exists in UIWebView under IOS. Attackers who successfully exploit this vulnerability can remotely obtain all local file system contents in mobile app sandbox, including browser Cookies, user configuration files, documents and other sensitive information. WKWebView can be manually set to allow the “file://” field to make cross-domain requests.

performance

For IOS, WKWebView is much better than UIWebView in page opening speed and resource consumption. Apple has not solved the problem of UIWebView memory leak well. Now Apple has officially abandoned UIWebView, it is time for developers to use WKWebView.

Using a simple

A good thing should be simple to use.

For the JS Bridge, ease of use should include three ends: Android, IOS, and JavaScript, which means that it is important to keep it simple enough for each end to avoid a lot of native vs. front-end development.

strong

The functionality should be as powerful as possible while satisfying usability and simplicity of use. Many of the current implementations, basically only meet the availability, but the function is relatively weak, such as:

  1. Methods for detecting the presence of an API are not supported; Sometimes it is uncertain as version iterations whether a Native or Javascript method exists under a particular version (some of which are newly added during version iterations).
  2. Schedule callback is not supported; The existing JS Bridge basically supports only one call and one return, but sometimes, for example, when JS calls the method of native download file function, native needs to continuously return the download progress to JS during the download process.
  3. Does not support API management; When the existing JS Bridge registers the API, each API needs to be registered separately. In this case, it is not only very troublesome to use the API, but also not conducive to API classification management.

The Gospel

I have broken the reality for everyone, and I must restore hope for everyone! Don’t understand? That is to say, the front is foreshadowing, below is the real purpose!

So is there a usable, robust, cross-platform, secure, easy to use, powerful off-the-shelf JS Bridge?

Ha ha, of course there is. After staying up all night, browsing around, working hard and forgetting everything, I finally created such a robust, cross-platform, safe, easy to use and powerful JS Bridge, that is DSBridge, which has the following characteristics:

  1. IOS, Android and Javascript are easy to use, lightweight and powerful, secure and robust.
  2. Both synchronous and asynchronous calls are supported
  3. Supports centralized management of apis in a class manner
  4. Support for API namespaces
  5. Support for debug mode
  6. Support API presence detection
  7. Support for progress callback: one call, multiple returns
  8. Supports Javascript to close the page event callback
  9. Support for Javascript modal/modeless dialog boxes

For security and performance reasons, DSBridge v3.0.0 will only support WKWebView, not UIWebView. If your project also needs to use UIWebView, use DSBridge V2.0.0

Of course, the source address must be given:

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

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

Please refer to the Github documentation for details, all in Chinese.

Finally, if you like DSBridge, welcome star, can’t work hard for years and no one knows, haha.