An in-depth understanding of the implementation principle of Hybrid

• • file and schema protocol

  • webview

  • hybrid technology: how to use file, schema protocol and webview control to achieve?

  • Origins of hybrid technology

  • How is hybrid technology implemented?

  • Summary

  • Reference link

Before introducing JSBridge, let's briefly introduce hybrid.

In front-end mobile development, there are three main types:

• Native APP development (led by Android and iOS);

• HTML5 web app development;

• Mixed development of native APP and HTML5, that is, hybrid technology;

Origin of hybrid technology

First, let's compare the web app and the native app:

image.png

Combining the advantages and disadvantages of the two, the Hybrid application was born.Simply put, a hybrid application is a web application that wraps a native application's shell.Hybrid Technology:

• Compatible with multiple platforms, you can call the functions provided by the mobile phone system, and you can download it in the app store;

• Its performance and user experience are not as good as native apps but higher than web apps;

• It's online time depends on whether the function is implemented by web or native;

• Hybrid technology needs to understand native APP development, front-end development, and back-end development to complete, so the development cost is high and the maintenance cost is also high.

How is hybrid technology implemented?

The realization of hybrid technology depends on the following two points:

• file and schema protocols;

• webview; each is described below.

file and schema protocol

These three protocols are often used in apps:

• file protocol: used to open local files, the advantage is fast;

• https protocol: http and ssl/tls protocol, this protocol needs to send network requests, which is naturally much slower than the file protocol;

• schema protocol: the protocol used for client and front-end communication;

• Some schema protocols of WeChat are listed as follows:

  • weixin://dl/scan Scan

  • weixin://dl/moments Moments

webview

webview is a browser control based on the webkit kernel in the mobile phone system, with a rendering engine and a JS engine, used to display html pages.It is the same principle as the browser to display the page, you can think of it as a castrated version of the browser.Simply put, it is a container for displaying pages, for example:

image.png

The red box part is the webview control/container that displays the page, and outside the red box are other controls and components controlled by native (native app).

hybrid technology: how to use file, schema protocol and webview control to achieve?

There are 2 ways for webview to load the page:

• To load a web page, just pass in the http URL;

• Load local pages, here are two subdivisions:

  • Load the html page under the assets directory: In this way, you can access local offline files without making network requests, which can reduce the user's data traffic;

  • Load cached to the local page: mainly used for offline cache of the page, such as storing the html file cache in the local file directory.For details, see the two ways WebView loads pages - web pages and local pages: https://www.cnblogs.com/zxxiaoxia/p/6831085.html

If the webview loads a local page, it is generally called through the file protocol, as follows:

webView.loadUrl("file:///android_asset/staticHtml.html");

Then calling and rendering the front-end page directly through the file protocol in the webview container is definitely faster than sending an https request in html5 and then rendering it, because we mentioned earlier that the file protocol is faster than https to obtain resources.

The webview container obtains the front-end page resources through the file protocol call as shown below:

image.png

If the page resources loaded in the webview are frequently iterated, how can the user be updated synchronously?

At this point, we can use the native app's api to send network requests to obtain server-side page resources. What are the advantages or differences compared to html5 to send requests to obtain resources?This is the case, through the native app, we can request all the pages of the server while opening the app. When we want to display the page, the page resources are already in the local area. After getting it, we can directly render and execute js, which is fast.A lot, that is, the processing of preloading page resources.This is not to go to the server to request resources every time the app is opened, but to request resources only when the server resources are updated, which can reduce the time for resource loading.

Implementation idea: Only when the user version number and the server version number are inconsistent, the resource request is made, as shown below:

image.png

In the client (ie app), how to interact with the front-end page is to use the schema protocol mentioned above, which is simply to intercept the url with the schema format we agreed to do some processing.Details will be discussed later.

Summary

Simply put, hybrid technology realizes page loading, rendering, display, and communication with native and server through webview and file and schema protocols.Hybrid is not perfect, whether to use it depends on your actual application scenarios and needs.

Reference link:

• hybrid technology https://blog.csdn.net/yexudengzhidao/article/details/82811185

• There are two ways for WebView to load pages - web pages and local pages: https://www.cnblogs.com/zxxiaoxia/p/6831085.html

• What is the relationship between webview and mobile browser?https://www.zhihu.com/question/40871670