How to encapsulate HTML5 into an Android app APK File

As the next-generation Web page language, HTML5 has many new features that have long been expected. One of the advantages of HTML5 is its ability to achieve cross-platform game code porting. Many companies now use HTML5 Technology on mobile devices. With the continuous enhancement of HTML5 cross-platform support and the rapid popularization of smartphones, HTML5 technology has a very promising development prospects. Some even predicted that HTML5 will trigger a new revolution in mobile platform game development technology.

More and more developers are keen to use HTML5 + JavaScript to develop mobile Web apps. However, it is still unknown whether HTML5 web apps can replace mobile apps in the future. On the one hand, users do not like to enter complex URLs in their browsers. On the other hand, HTML5 web apps are stored on the server and data transmission is required for each use, this will cause a waste of traffic. Some developers don't want to get involved with complicated Java code. So, how can we use HTML5 to develop applications and simply encapsulate them into APK files?

1. webview in Android SDK

1. instantiate the webview component in the activity: webview = new webview (this );
2. Call the webview loadurl () method to set the web page to be displayed in wevview:
For Internet: webview. loadurl ("http://www.31358.com ");
Local file: webview. loadurl ("file: // android_asset/xx.html"); local files are stored in the assets file.
3. Call the setcontentview () method of activity to display the webpage view.
4. after reading many pages through the webview link, in order to allow webview to support the rollback function, we need to overwrite the onkeydown () method of the activity class. If no processing is done, click the system rollback scissors, the entire browser calls finish () instead of rolling back to the previous page.
5. You must add permissions to the androidmanifest. xml file. Otherwise, the web page not available error may occur.

<Uses-Permission Android: Name = "android. Permission. Internet"/>

Disadvantages: If the webpage is loaded, there is no problem, but if it is HTML5, after encapsulation, it can be accessed normally at or above android2.3, android2.2 and below, the webview In the SDK does not fully support HTML5.

The following is an example:
Mainactivity. Java

Package com. Android. webview. activity;
Import Android. App. activity;
Import Android. OS. Bundle;
Import Android. View. keyevent;
Import Android. WebKit. webview;
Public class mainactivity extends activity {
Private webview;
@ Override
Public void oncreate (bundle savedinstancestate ){
Super. oncreate (savedinstancestate );
// Instantiate a webview object
Webview = new webview (this );
// Set webview attributes to execute JavaScript scripts
Webview. getsettings (). setjavascriptenabled (true );
// Load the webpage to be displayed
Webview. loadurl ("http://www.31358.cn /");
// Set the Web View
Setcontentview (webview );
}
@ Override
// Set rollback
// Override the onkeydown (INT keycoder, keyevent event) method of the activity class
Public Boolean onkeydown (INT keycode, keyevent event ){
If (keycode = keyevent. keycode_back) & webview. cangoback ()){
Webview. Goback (); // Goback () indicates that the previous page of webview is returned.
Return true;
}
Return false;
}

Add permissions to the androidmanifest. xml file
 

<? XML version = "1.0" encoding = "UTF-8"?>
<Manifest xmlns: Android = "http://schemas.android.com/apk/res/android"
Package = "com. Android. webview. Activity"
Android: versioncode = "1"
Android: versionname = "1.0" type = "codeph" text = "/codeph">
<Uses-SDK Android: minsdkversion = "10"/>
<Application Android: icon = "@ drawable/icon" Android: Label = "@ string/app_name">
<Activity Android: Name = ". mainactivity"
Android: Label = "@ string/app_name">
<Intent-filter>
<Action Android: Name = "android. Intent. Action. Main"/>
<Category Android: Name = "android. Intent. Category. launcher"/>
</Intent-filter>
</Activity>
</Application>
<Uses-Permission Android: Name = "android. Permission. Internet"/>
</Manifest>

Ii. Use phonegap

Phonegap is based on HTML, CSS, and Javascript. It creates mobile cross-platform mobile applications.Quick Development Platform. It allows developers to take advantage of the core features of iPhone, Android, palm, Symbian, WP7, bada, and BlackBerry smartphones-including location, accelerator, contact, voice, and vibration, in addition, phonegap has a variety of plug-ins, which can be used to expand unlimited functions. Phonegap is free of charge, but it requires additional software provided by a specific platform, such as the iPhone SDK for iPhone and Android for Android.
SDK,

See http://phonegap.com/start#android for details

Advantages: the SDK is added to eclipse, which allows you to program freely and perfectly adapt to the screen sizes of different devices. It is suitable for use by experts.

Disadvantage: webpage loading without layout, and advertisement cannot be added.

3. Online generation using rexsee

RexseeIs an open-source Android development platform that allows developers to quickly implement mobile applications using HTML5, css3, and Javascript in a standardized web development mode. HTML and Android. All you need to do is upload the HTML5 application to the rexsee server. Soon, it will be compiled into a standard APK Installation File.

Website: http://www.rexsee.com

Advantages: one-click generation, suitable for common users

Disadvantage: you cannot add an advertisement because it is directly encapsulated.

Iv. Online generation of appmobi HTML5 xdk (using the phonegap plug-in)