The fourth issue of the Aiti Tribe live class: How to quickly convert an H5 website into an App?

Converting an H5 website into an App is not just a matter of putting a WebView shell on it. The key is to achieve the functions and experience of the native version. wap2app is a front-end development framework that converts H5 websites into Apps. It is based on the HTML5PLUS engine at the bottom layer and can call hundreds of thousands of native APIs to achieve more powerful push, payment, sharing, positioning and other capabilities, solving the functional deficiencies of M stations due to insufficient APIs. So, how to quickly convert M stations into Apps through a front-end development framework? We specially invited Mr. Cui Hongbao, CTO of DCloud, to share his experience live.

Introduction

1. Requirements for converting H5 website into App

2. The experience gap between web apps and native apps

3. Introduction to wap2app framework

4. Wap2app Implementation Solution

5. Wap2app development method

Hello everyone, today's topic is: "Converting H5 websites into native experience apps"

1. Requirements for converting H5 website into App

If we only have an H5 website but no App, what are the options for generating an App? With current technology, there are roughly three routes:

1. Use Android/Object-c native language and redevelop for each platform; this will lead to parallel development of H5, Android, and iOS, which will increase costs and efficiency;

2. Using cross-platform technologies such as React Native/weex/mui/Cordova, one set of code covers both Android and iOS platforms; this requires maintaining two sets of code for H5 and cross-platform App, with both cost and efficiency being moderate;

3. Reuse the H5 website and directly convert it into an App. In this way, you only need to maintain one set of H5 codes, which is low in cost and high in efficiency.

Although the third option is the most expensive, it is also the most difficult to do well. If you just use webview to simply package it, the functional experience is far behind that of the native App, and end users will not buy it.

The key to converting an H5 website into an App is to realize the functions and experience of the native version. This has been a conversion problem that has existed in the industry for a long time, and many people have even given up hope.

2. The experience gap between web apps and native apps

The experience gap between web apps and native apps is mainly reflected in:

Window animation: H5 web pages on mobile browsers jump to the current page through href, without animation; but native apps switch through native View animation, which provides a better experience;

Scroll bar goes to the top: The title bar of H5 webpage is usually fixed at the top in div mode, and the scroll bar of the page goes to the top, covering the right side of the title bar. This effect is not native. Although using div scrolling can also solve the scroll bar going to the top, div scrolling is not efficient enough for commercial use on Android.

Pull-down refresh: The pull-down refresh simulated by DIV on H5 webpages is not smooth, and even many M sites simply do not do pull-down refresh. However, this is a common and important interactive operation in Apps.

Tab switching: When the native App switches tabs, the tab area remains unchanged, only the content area view changes; but when the web app switches tabs, the entire page is reloaded, and a white screen often appears.

Back button processing: If the user's previous operation triggered the pop-up layer display (such as address selection), when the user presses the back key, the native App will first close the pop-up layer and will not directly close the current page; but the web app will directly execute the history.back() logic, causing the entire page to go back.

Rendering speed: H5 websites are B/S structures and need to be downloaded before rendering; while native apps are mostly C/S structures, resources are loaded locally, and some elements can be rendered immediately without waiting, avoiding the white screen phenomenon;

System capabilities: Due to API restrictions, many terminal capabilities cannot be called in HTML5, resulting in many functions missing or inferior to native ones, such as push, code scanning, sharing, payment, etc.

After systematic analysis, we found that there are many such experience differences. Based on years of HTML5 development experience and a large number of project practices, we solved the above experience differences one by one and finally polished the wap2app product.

3. Introduction to wap2app framework

wap2app is a development framework that can quickly publish existing HTML5 websites into apps. Through the wap2app framework, you can enhance the experience of the M site with simple configuration and necessary programming. It can be packaged into ipa for iOS platform and apk for Android platform, and can be launched on major application markets. The converted app is comparable to the native app.

Don’t believe it’s comparable to the original? Watch the video: https://v.qq.com/x/page/x05025vurui.html

Video Description:

- Environment: Same mobile device (Xiaomi 6, same MIUI version), same network, memory cleared before use, and the native application used the latest version.

- Conclusion: The rendering speed of the new wap2app page is comparable to the native one. It can be rendered within 300 milliseconds of animation, and the animation is smooth.

The wap2app framework has the following features:

1. Provides native rendering capabilities, allowing interface rendering speed and animation effects to achieve native experience

2. Provide rich system native capabilities (positioning, sharing, payment, push, etc.) to achieve native functions

3. Configure page rules and strengthen rules through json, with low workload and low learning cost

4. M station only needs minor modifications, and the cost of transformation is low

5. Strengthen the decoupling of the previous M station. When the M station upgrades its business logic, the generated App will automatically contain the updated business logic.

4. Wap2app Implementation Solution

The underlying implementation of wap2app is very complex, involving a lot of native and HTML5 optimizations. We have corresponding optimization solutions for each experience difference problem, such as:

Window animation: wap2app intercepts page jumps at the bottom layer, loads new pages using a new webview, and then uses the view's native animation (such as slide-in-right or pop-in) to switch;

Scroll bar goes all the way to the top: Use the native title bar instead of the HTML5 title bar, created together with the webview; support automatic reading of page titles, which solves the problem of scroll bar going all the way to the top and avoids the problem of the page being completely white.

Tab switching: Split the tab area and content area into two separate webviews. When switching tabs, the tab area webview only switches to the highlighted state, and then notifies the content area webview to load the new page, so as to avoid the overall white screen phenomenon.

Next, we will focus on two aspects: capability expansion and rendering acceleration.

1. Capability Expansion

HTML5 has far fewer available APIs than native apps, and many functions related to system devices cannot be realized; wap2app is based on the HTML5 PLUS engine at the bottom layer, which can call hundreds of thousands of native APIs to achieve stronger push, sharing, payment, positioning and other system capabilities, and can achieve the same functional requirements as native apps.

The HTML5 PLUS API that can be called in wap2app is divided into two parts.

1.1 Commonly used APIs – HTML5plus

Including common APIs such as QR code, shake, voice input, map, payment, sharing, file system, address book, etc., encapsulated into cross-platform HTML5plus specifications, and made the specifications public at www.HTML5plus.org, without vendor-proprietary APIs. HTML5 China Industry Alliance has now become a subordinate unit of the Ministry of Industry and Information Technology, and the HTML5Plus specification has also become an industry standard and has been approved as a national standard.

1.2 Other native APIs – Native.js

There are more than 400,000 native APIs on iOS and Android respectively. Some APIs are not commonly used and do not have cross-platform features, such as the iOS game center API. Encapsulating too many APIs into HTML5plus will increase the size of the runtime too much, but it will be troublesome to use these APIs if needed.

We have a breakthrough technology to solve the above problems - Native.js, a technology that maps 400,000 native APIs to JS APIs.

1.3 Native extension example - sharing

Due to the limitation of HTML5 capabilities, H5 websites only support sharing in WAP mode, which provides a poor sharing experience. The following is a typical implementation (see the screenshot below):

- After clicking on WeChat Share, a QR code is displayed. The user needs to launch WeChat to scan the QR code, open the article in WeChat first, and then share it through the menu in the upper right corner of WeChat; the sharing path is too long and the operation is troublesome;

- Click on Weibo to share, you need to log in to the Weibo wap site and complete the authorization before you can share.

wap2app runs under the HTML5 PLUS engine. It can directly call the system native sharing through the share module of HTML5 PLUS. In the same scenario, with a little modification, calling the native sharing in the wap2app environment will greatly improve the experience. The following is a screenshot after calling the native sharing:

Obviously, after wap2app activates native sharing, the sharing path is shorter, the experience is better, and it is more conducive to content sharing and dissemination.

2. Next, let’s talk about rendering acceleration

The loading and rendering speed of web pages is much slower than that of native apps, which seriously affects the business experience on mobile devices. The reasons for this experience gap are as follows:

-- Rendering timing: Web apps need to wait for the server to finish downloading the document before starting the rendering work, and cannot render in different areas in advance; while native apps, as C/S structure applications, only request business data from the server, and other layouts and styles are mostly local. Therefore, when the user triggers the opening of a new window, the layout of some areas of the new window can be rendered immediately, and the content of the corresponding area can be updated after the server responds to the data;

--Timing of requesting image resources: The web app needs to download the document first, and then asynchronously load the image resources according to the src attribute of the <img> tag in the document. Therefore, in the web app, you always see the text first, and then gradually see the image. However, the native app does not need to wait for tasks and can directly load image resources. Therefore, the image display of the native app will be earlier than that of the web app.

--Timing of business data request: If the web app is implemented with separation of front-end and back-end, it is necessary to first download the js file that encapsulates the business logic. After the download is complete, js will initiate an ajax request. For native apps, most of the business logic is encapsulated locally. There is no need to wait for the js file to be downloaded, and HTTP business requests can be initiated earlier.

Many companies are trying to improve the rendering speed of web pages, such as the AMP technology led by Google and the MIP technology extended by Baidu in China. These technologies are mainly used to accelerate reading web pages, and are not suitable for scenarios with complex JS interactions, so their scope of application is limited.

Based on webview, DCloud proposed subNView technology, which is a more general solution that can enhance the rendering experience of any web page.

2.1 Introduction to subNView

subNView, literally means sub native view, has two core points:

- native: subNView is a natively drawn View, which has nothing to do with HTML5 DOM

- sub: subNView is part of the webview and does not replace the complete Webview. It maintains the same life cycle as the webview to which it belongs, and changes with the close, hide, and zindex of the webview.

subNView is a subcontrol of webview. A webview can contain multiple subNViews. Multiple images (including image carousels), texts, areas, buttons, etc. can be drawn on a subNView.

SubNView retains the advantages of HTML5 and takes advantage of native rendering by using native View. When the user triggers window switching, webview continues to load the document and render the page according to the original logic. However, there is no need to wait for the document to be loaded. The following tasks can be completed in advance on the native View:

- Draw a fixed content area, or an area that can get data from the previous page, such as a fixed address image, a shopping cart button, etc., without waiting for the Document to be downloaded before requesting to load the image

- Directly initiate an ajax request for business data, and directly draw the data on the native View after the ajax response, without waiting for the JS encapsulated by the business to be downloaded.

The following is an example of a product details page enhanced with subNView:

As can be seen from the above figure:

* Webview loads the Document and renders the page according to the original logic. When the content is not loaded at the beginning, the screen is still white (with a blank area in the middle)

* Webview also creates 2 subNViews as sub-controls of webview

* subNView 1 displays a carousel of product details and product prices, which are obtained dynamically through ajax; the carousel images support sliding and clicking to enlarge the preview, so users can view product details in advance

* subNView 2 displays shopping cart related functions, which is fixed display content and can be rendered directly

* After the shopping cart button is clicked, the event is passed to the shopping cart button in Webview, and all the logic of the HTML page is still reused. subNView simply invades the animation rendering process and does not cause the rewriting of business logic.

The following is a comparison of the page switching process after using subNView acceleration:

2.2 How to use subNView

Developers can create or modify subNview controls through the subNViews property of webview, where a complex json object needs to be passed in; to simplify development, DCloud provides NView template technology.

NView template is similar to single-file components of Vue. Create a new NView template file in HBuilder. The default code is as follows:

NView template involves concepts such as template tags, attributes, style definitions, data binding, etc. Please visit wap2app official website for details.

5. Wap2app development method

wap2app is easy to develop, mainly based on json files for quick configuration, simple rules, low learning cost and less workload; a medium-sized M site can be converted by a front-end engineer in about 4 days. wap2app also supports Javascript advanced programming, which can realize more complex demand development.

In the specific development process, wap2app involves

1. The work of wap2app local side: describe the page relationship and animation enhancement scheme through the sitemap file provided by the framework to achieve the native form switching effect. When the sitemap.json configuration cannot meet the complex requirements, you can use app.js programming to enhance the processing.

2. H5 website transformation: according to the App running environment (different UA), make appropriate modifications, including removing some page elements that should not appear in the App (such as the PC version link at the bottom, and hiding the original HTML5 DIV navigation bar after enabling the native navigation bar).

3. If you need to call DCloud's HTML5+ extension capabilities, such as WeChat sharing, push, and native payment that were previously unavailable on M Station, you need to perform necessary programming and development. This work can be done locally or on an H5 website (it needs to be distinguished as a wap2app operating environment).

one more thing, wap2app is completely free!

For more information, please visit wap2app official website: http://dcloud.io/wap2app.html

The following questions are from the 51CTO developer community:

Q: web_何_南冲: Can the streaming application be directly launched after the wap2app transformation?

A: DCloud-Teacher Cui: Yes.

Q: It doesn't matter: When will NView templates be available on the mui framework?

A: DCloud-Teacher Cui: Generally it is App development, based on C/S structure, the HTML page is local, the rendering speed is still acceptable, and the NView template is not very meaningful.

Q: Yiben Wuyan: If an app developed with hbuilder can it be quickly reversed to wap?

A: DCloud-Teacher Cui: DCloud provides developers with two development modes:

1. Develop from scratch, use the mui framework, develop once, and you will have both the app and the wap site;

2. If you already have a wap site, use the wap2app framework to enhance the wap site into an app.

Q: Yiben Wuyan: This applies to scenarios where WAP does not exist yet and is developed using our development tools, and can then be quickly converted into an app project. If a WAP project has already been developed, will it not be applicable? Or will it be a huge workload if it is applicable?

A: DCloud-Teacher Cui: There is no wab or App. It is recommended to use mui, develop once and publish on multiple terminals

If you already have wap but no App, we recommend using wap2app to quickly publish it into an App.

Q: Yiben Wuyan: Which one has the best effect and smoothness, mui or wap2app?

A: DCloud-Teacher Cui: It depends on your current stage. If you optimize well, you will have a good experience. You can download it from http://liuyingyong.cn/

Download the streaming application manager. Vipshop, Dianping, and JD Mobile are all based on wap2app. You can experience the smoothness.

Q: Yiben Wuyan: The problem is that I used mui + h5+ to develop the app and then converted it to wap, but the h5+ content in wap is not supported.

A: DCloud-Teacher Cui: If you want to call 5+ code, you need to distinguish the platforms. If you determine that it is a 5+ environment, then call it. In the browser mode, downgrade or hide the function.

Q: php-Internet+-Shanghai: Hello, Mr. Cui, I have two questions:

Question 1:

Teacher Cui said above: "Window animation: wap2app bottom layer intercepts page jump, and the new page is loaded using a new webview"

Does it mean that all href jumps of a tags are automatically intercepted or do they require special configuration?

Question 2:

After decompression of the packaged APK, all front-end files such as html/css/js can be seen, which are very easy to be leaked or stolen. Have you considered preventive measures in subsequent upgrades?

A: DCloud-Teacher Cui: wap2app will intercept the location.href jump at the bottom layer, whether it is the click jump of the a tag or the jump of js. Currently, there is an encryption option when packaging.

Q1: web_何_南冲: If I want to create a new mobile system that covers webapp, streaming applications, WeChat public account pages, Android, and IOS, that is, develop once and release 5 times, what technology should I use?

Q2: Development-sanbor: Can wap2app only be used in streaming applications?

A: DCloud-Teacher Cui: Currently, it supports packaging wap2app projects into native installation packages (ipa installation packages for iOS platform and apk installation packages for Android platform), and also supports publishing to streaming application platforms.

Q: Chen Yongsong-Xinyang: I want to determine different permissions after logging in, so as to display different bottom tabs. Is it possible?

A: DCloud-Teacher Cui: The accurate description of this requirement is the tab optimization of the secondary page, which will be supported in the future.

Q: Guangzhou - Front-end - Huang Xiaowen: Can mui be a wap site? Isn't it an app site?

A: DCloud-Teacher Cui: mui supports multi-terminal publishing and can be published to different platforms by building tools.

Q: Huang Xiaowen, Front-end, Guangzhou: Doesn't MUI multi-terminal release refer to iOS and Android? Can wap sites also be made? Does mui support wap-based M sites?

A: DCloud-Teacher Cui: You can visit it through your mobile browser or WeChat: http://dcloud.io/hellomui/

This code is actually the same as the hello mui code for iOS and Android.

Q: Big Data-ta-Beijing: If you want to run the wap2app application, you must install a plug-in. Users who don’t know may think they have entered a phishing website. This is not good.

A: DCloud-Teacher Cui: What plug-in should be installed? Currently, many Internet companies' streaming applications are based on wap2app, so you need to install a streaming application manager to experience it; but many entrepreneurs have already implemented wap2app projects by themselves, packaged into apk/ipa, and can be directly installed on the phone to run without installing any plug-ins.

Q: PHP-Internet+-Shanghai: Do we have any special support for MUI at the bottom level? If we use other front-end frameworks such as Bootstrap, or the effects written by ourselves, does it mean that it is not as fast as using MUI to render?

A: DCloud-Teacher Cui: There is no private support at present. The characteristics of mui are lightweight, native UI, and multi-terminal publishing. Developers can also use other UI libraries.

Q: PHP-Yang-Xiamen: Can some single pages or non-single pages made with front-end frameworks such as vue, angular, etc. be converted using wap2app?

A: DCloud-Teacher Cui: wap2app has currently mainly optimized MPA, the SPA mode effect is not obvious and is not recommended.

Q: Open the network - Mr. Li: Since the existing wap site has multiple headers, does wap2app support multiple styles of native headers? The native header has a "shopping cart" button. When there are items in the shopping cart, a red dot will be displayed. Is this possible now?

A: DCloud-Teacher Cui: You can customize the navigation bar, get the navigation view through plus.webview.WebviewObject.getTitleNView, and then draw it yourself.

Q: php-inspiration-Suqian: For chat, for example, on the talent website, can I get the corporate ID of the webpage? Then I can chat. What is MPA? What is SPA?

A: DCloud-Teacher Cui: SPA: single page application

Q1: Soft and cheap engineer: Actually, I have always had a question about this. Some wap websites use front-end templates such as jstl, vue, or jfinal's enjoy. Can dcloud's wap2app also be converted?

Q2: Front-end - Guangzhou: 1. Develop from scratch, use the mui framework, develop once, and both the app and the wap site will be available; how is this done?

A: DCloud-Teacher Cui: http://dcloud.io/mui.html It is recommended to understand the basics of mui first. For example: mui.openWindow() opens a new webview in the App, and the browser downgrades to execute location.href jump

Q: Front-end - Guangzhou: I have made an app using mui, but now I want to convert the app to wap for embedding in a third-party app. How can I use mui to achieve this? I don't know what framework the third-party app uses. Isn't the app page opened using the native bottom layer?

A1: DCloud-Teacher Cui: Directly deploy the app code you developed to the server, and then use the browser to access it to see if there are any compatibility issues. If there are no problems, you can use it directly.

For example: mui.openWindow() opens a new webview in the App, and the browser downgrades to execute location.href jump

A2: Mobile - Xiaoyu - Beijing: Ordinary browsers do not support 5+ runtime, so you need to process the parts that use plus-related APIs. I have done something similar before, but it is relatively simple. For example, if you use mui.openWindow to jump, you don't need to process it. If you use the native version for sharing, you have to register the h5 version yourself to make it compatible with different environments.

Q: Beijing-unicorn-data: Are HBuilder and wap2app charged for commercial use? Are there any cases of combining them with GraphQL?

A: DCloud-Teacher Cui: Free, no charge. As far as I know, there is no case study yet.

Q: php-Zongheng-Qinhuangdao: I think the problem with hb*** is that there is no obfuscation of HTML and CSS, and the native code is directly leaked.

A: DCloud-Teacher Cui: Currently only js encryption is supported, html and css encryption is not supported, but the business logic should also be extracted and written in js.

[51CTO original article, please indicate the original author and source as 51CTO.com when reprinting on partner sites]