I. Introduction: Why Hybrid App technology?

1. The background

I used to work in a small financial technology company (Base HangZhou). Due to the depression of the overall environment, my colleagues in the company have changed a lot. The original ios engineer has left and Android engineer has been transferred to Java background development. The company originally planned to give up the app business, but in the middle of June this year, it unexpectedly received p2p outsourcing business from a private bank and needed to develop the terminal APP (the construction period was two months).

2. Technical selection

1. Native development

In fact, the company has developed apps with the same business scenario before. The first solution we came up with was whether we could modify only a few parts of UI for similar apps to avoid secondary development. Later, when we sent our product personnel to communicate with them on demand, we found that the main process of the app developed before was basically inconsistent, and no ios students did the secondary development, so we gave up.

2. Flutter

Flutter is a cross-platform technology that is hot right now. Dart also supports AOT and JIT compilation. Flutter renders using its own SKia rendering engine rather than its native platform, so it is more consistent than RN for multiple applications. However, my ability is limited, and I only study at demo stage. It will not be used in this development. (I am also studying at present)

3. React Native

Before, the front-end team of the company (1-3 people floating) was always led by me and used React technology stack, but most of them were applied in the middle and background management system. The H5 end used Vue technology stack. RN is the only thing I have written in a simple demo before, and I have no actual experience. Although RN supports cross-end, there are still some differences in the form of expression among different platforms, and the interaction between RN and native platforms requires too much support from native platform knowledge. Consider cost and feasibility and give up. (Currently studying RN myself)

4. Hybrid

Hybrid technology is also known as Hybrid development, embedding our H5 page into the Webview of Native App. JSBridge is used as a bridge between H5 and Native. H5 can transfer data and call Natvie method, and Native can also communicate with H5. This way we can use a set of H5 pages to cover both Android and ios. (There are more mature Hybird frameworks on the market: AppCan, Cordova, etc.) The solution with the lowest time cost and the worst performance (after communication with the customer, the customer agreed to use this technical solution).

Ii. What are the ways to realize Hybrid technology’s native interaction with H5? (JsBridage principle)

1. Block the URL SCHEME
  1. URL SCHEME is a link similar to URL, which is designed to facilitate apps to call each other directly. The form is similar to common URL, but the main difference is that protocol and host are generally customized. For example: jsbridge: / / methodName? Param1 = value1 & param2 = value2;
  2. The main flow is as follows: The Web sends a URL Scheme request in a certain way (for example, iframe.src). Then the Native intercepts the request and performs related operations according to the URL Scheme (including the parameters).
  3. Disadvantages: Using iframe.src to send a URL SCHEME may cause a URL length problem.
  4. Note: why ifame. SRC and not locaiton. Href? Because if you call Native continuously through location.href, it’s easy to lose some calls.
2. Inject apis/objects

Principle: Inject an object or method into JS context (window) through the interface provided by WebView. When JS is called, the corresponding Native code logic is directly executed.

3. Rewrite the browser object
  1. How it works: You can override these methods in the Android WebView layer using prompt,console.log, and alert methods. Prompt is often used because it is not used much in JS and has fewer side effects when communicating with native.
  2. For example, the Web page calls prompt(), and the Android client intercepts incoming parameters by listening for onJsPrompt events. If the parameters meet certain protocol specifications, the parameters are parsed and thrown to subsequent Java processing. This protocol specification, preferably the same as the iOS protocol specification, so that the cross-end call protocol is consistent, but the specific implementation is different. Such as: hybrid: / / action? Protocols such as arg1=1 do not listen for prompt arguments in other formats, except hybrid://action? Arg1 =1, prompt is the same.

Iii. How do I interact with H5 in the project

1. H5 calls the method in app (expose a Java object to JS so that JS can call the method directly)
/ / code / / android end defines android inside the class object AndroidJs exposed to javascript. The webView addJavascriptInterface (new AppJs (mContext),"AppJs"); // H5 side codecloseKeyboard() {
    AppJs.closeKeyboard();
 },
Copy the code
2. App calls the method in H5 (intercepts the specified URL and calls the js method hanging on the window object)
// H5 side codemounted() {
    window["getAppResult"] = result => {
      if (result) {
        router.push({
          path: "/account/open/next",
          query: { bankAccountName: this.name, certNo: this.certNo }
        });
      } else {
        Toast.succeed("Biopsy failed."); }}; } / / android client code webView. EvaluateJavascript ("javascript:getAppResult(true)",
    new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
    
        }
    });
Copy the code

The disadvantages of Hybrid

  1. Based on Webview, the rendering performance of Webview is much worse than Native;
  2. JavaScript is an interpreted execution language and runs less efficiently than Native.

5. How to optimize our project if Hybrid technology is adopted

  1. Use offline package to solve the problem of slow loading of web pages; (Good article recommendation: Hybrid APP Web Static resources offline system practice)
  2. H5 code itself optimized Dom rendering to improve webpage rendering efficiency;

reference

  • Hybrid Development: JsBridge – Bridge between Web and client
  • JSBridge in mobile mixed development