Use Cordova to solve the problem of incompatibility of WebView phone made by HTML5

One: Android 4.0WebView Analytics

(1) WebView API

The main interface to our application, in order to be compatible with the downward version, Android in the high version is also a layer of API support,
(2) Android WebView Framework

Android Framework:android WebView is a special control implementation support requires that the Framework code is primarily in the./frameworks/base/core/java/android/webkit directory, The Android 4.0 implementation is mainly in Webviewcore.java,browserframe.java and other files.
(3) Android JNI

Android JNI: Requires native code support, so a JNI layer implementation is required, and the JNI layer of Android WebView 4.0 implements WebView related code in./external/webkit/source/webkit/ android/jni/directory, this layer plays a connecting role, linking the framework layer and the WebKit layer of the bridge, such as related to some implementations in the Webviewcore.cpp,webcoreframebridge.cpp and so on.

(4) Webkit

Webkit:webkit kernel, its core is the analysis of the standard and rendering typesetting Web page, he is a cross-platform kernel engine, then need to support each platform, need our platform implementation layer, in the Android 4.0 system this part of the relevant code mainly in./external/ webkit/source/webkit/android/webcoresupport/directory, such as FrameLoaderClientAndroid.cpp, ChromeClientAndroid.cpp, this layer is responsible for WebCore and the system platform bridge, the specific platform will have different implementations.

II: The structure of Android 4.1–4.3 WebView
Android 4.1–4.3 version WebView kernel implementation is still based on WebKit, but the framework layer in WebView has changed, introduced the Factory mode, the purpose is to separate the kernel and the upper API interface, the meaning of separation is not only the abstract interface, It is more important to replace the implementation of the kernel section in the future. In 4.1–4.3 this series of versions of the native structure is basically the same as the 4.0 release, presenting new changes:

Three: The structure of Android 4.4 webview
On Android 4.4, Google has replaced the system's default WebKit kernel with its own open source project chromium, and through previous versions of the analysis, we can see that Android has tweaked the WebView framework to make it more abstract, The more important goal is to integrate your own open source chromium. Let's take a look at the changes in the structure of WebView:

Hardware acceleration has been turned on by default on Android 4.0, so WebView rendering is based on hardware rendering by default, and by analyzing its hidden frame in webview, software rendering is used to reduce the hardware footprint and allow the other UI to respond in a timely manner.
In order to integrate the Chromium project into Android, the Chromium project abstracts the Android WebView layer, and the previous interface has become apparent, and Android WebView is based on chromium content API this layer, third-party browser vendors can also use this way, the current understanding of the manufacturers have opera use this way. The Android 4.4WebView rendering core has not changed much at this time, or based on the WebView canvas, drawing the chromium composit structure onto the WebView canvas. Access to the chromium kernel, WebView browsing performance is greatly improved, but with Chrome for Android is still a little different, mainly reflected in the following:
1. The Chrome browser is a multi-process architecture, Chromium for Android Webview is a single-process architecture.
2. Chrome browser has much larger memory footprint than Android WebView.
3. Chrome supports more HTML5 feature.

Four: Android 5.0 WebView
The WebView kernel implementation in the lollipop version is in chromium version 37, which brings more security and stability. This version resolves the Android 4.4 version of the webpage to request access to open the local file selector problem, introduced a new callback interface, the Onshowfilechooser method, which requires this function can be connected to the callback interface on 5.0, and implement the function. In addition, this version provides a security license for the user to choose, when the webpage needs to access special resources, will notify our application, request permission, callback interface for Onpermissionrequest. We also mentioned earlier that this version allows WebView to support WEBAUDIO,WEBGL,WEBRTC standards by default.
In addition, Google Android will be webview as a dynamic update of the app, can not update the Android version of the case, update the WebView kernel. The Android 5.0 webview default provides reduced memory footprint support, and intelligently selects the HTML document department that needs to be drawn to provide performance. Of course, developers can turn off this option (Enableslowwholedocumentdraw) when their application needs it.
V: Use Cordova
(1) Cordova Overview

What is Cordova?
* A framework for mobile development
* Package Html,css,js as native app (Hybrid) (enables a front-end engineer with the ability to develop Android apps)
* PhoneGap products from Adobe are the underlying source for many of today's web development frameworks
(2) Download and install the Cordova framework

You must first lower node. js before downloading the Cordova framework (Note: node. js is a JavaScript runtime environment.) It actually encapsulates the Google V8 engine. The V8 engine executes JavaScript very fast and performs very well. node. JS optimizes some of the special use cases, providing an alternative API that allows V8 to run better in a non-browser environment. )

Confirm Installation Success

Install Cordova on Windows

Installation speed is a bit slow, also need to turn over the wall support
The following diagram shows that the installation was successful

(3) Installing Ant

Input URL: http://ant.apache.org/
Find Download–binary distributions on the left side of the view

Select the corresponding zip file to download

Add the bin directory of the extracted zip file to the environment variable

(4) Partial instructions for Cordova

Create a "Cordova" folder in the E-drive
Enter the e-drive

Go to the "Cordova" directory you created earlier

Create your own first project

which
Hello indicates the folder where the project resides
Com.aqiu.sample represents the package name of the project
HelloWorld represents the Ingress class
Go to the Hello folder that you created earlier

In the Hello project folder, build an Android platform environment for it

In this case, a block of code that can be run in as is automatically built, using as to open the Platform–android

(5) file directory in the project file

Hooks
We've stored our custom extension features.

Platforms: is the doc introduction of the operating platform, we are running the Android environment
WWW: Represents the configuration file for HTML5
Note: This place replaces the default file with its own html+css file so that it can display the HTML layout that you have written.

Config: Config file with start Page HelloWorld and project name "index.html" Basic information

Six. Integrated Cordova project for Android Studio
1.build Building a successful code block

2. Questions to be aware of when using Cordova

(1) In mainactiity, there is no webview layout, which is built by code in a dependent library cordovalib
(2) in the OnCreate method of activity, after Loadurl (launchurl) call, WebView object Appview in Cordovalib has value, so when using Appview, it must be written in the back of Loadurl
(3) in Cordova, Appview is not able to call the Addjavascriptinterface () method directly, as required, before calling the method,
You need to add a line of code:
WebView Wv = (WebView) appview.getengine (). GetView ();
(4) As resource file, the WWW folder is added, so when using a picture under the path, add the/www/path under the resource path

Use Cordova to solve the problem of incompatibility of WebView phone made by HTML5