Four ways to turn HTML5 Web apps into Android apps

As the next generation of Web language, HTML5 has many new features that have long been expected. One of the advantages of HTML5 is that it enables cross-platform game coding porting, and many companies are now using HTML5 technology on mobile devices. With the continuous enhancement of HTML5 cross-platform support and the rapid development of smartphones, HTML5 technology has a very good prospect, and even some people predict that HTML5 will ignite the new revolution of mobile platform game development technology.

More and more developers are keen to use Html5+javascript to develop mobile web apps. However, whether the advent of HTML5 Web apps will replace mobile applications in the future is still unknown. On the one hand, users in the use of habits, do not like to enter complex URLs on the browser, on the other hand, HTML5 Web App stored on the server side, in each use of the need for data transfer, resulting in a waste of traffic. Some developers do not want to touch complex Java code, then, what is the way to use HTML5 to develop the application, but also can be simply encapsulated as an apk file it?

I. WebView in the Android SDK

1. Instantiate the WebView component in the activity to: WebView WebView = new WebView (this);

2. Call WebView's Loadurl () method to set the page to display Wevview:

Internet use: Webview.loadurl ("http://www.***.com");

For local files: Webview.loadurl (file:///android_asset/XX.html); Local files are stored in the: Assets file

3. Call the activity's Setcontentview () method to display the page view

4. Use WebView point link to see a lot of pages later in order to let WebView support fallback function, need to overwrite the Activity class onkeydown () method, if do not do any processing, click the system fallback shear key, the entire browser will call finish () and end itself, Instead of retreating back to the previous page

5. You need to add permissions to the Androidmanifest.xml file, or the Web page not available error will occur.

<uses-permission android:name= "Android.permission.INTERNET"/>

Disadvantage: If the load is a normal web page, there is no problem, but if it is HTML5, encapsulated, in android2.3 above to normal access, android2.2 and below, the SDK WebView has not fully supported HTML5

Here is a concrete 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 WebView;

@Override

public void OnCreate (Bundle savedinstancestate) {

Super.oncreate (savedinstancestate);

Instantiating a WebView object

WebView = new WebView (this);

Set the WebView property to be able to execute JavaScript scripts

Webview.getsettings (). Setjavascriptenabled (True);

Load Web pages that need to be displayed

Webview.loadurl ("http://www.***.cn/");

Set up a Web view

Setcontentview (WebView);

}

@Override

Set fallback

onkeydown (int keycoder,keyevent event) method that overrides 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 the WebView is returned

return true;

}

return false;

}

Add permissions in 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" >

<USES-SDK android:minsdkversion= "Ten"/>

<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>

Second, the use of PhoneGap

PhoneGap is a fast-developing platform for creating mobile cross-platform mobile applications using HTML,CSS and JavaScript. It enables developers to take advantage of the core features of Iphone,android,palm,symbian,wp7,bada and BlackBerry smartphones-including geolocation, accelerators, contacts, sounds and vibrations, and PhoneGap has a rich plug-in, You can extend unlimited functionality with this. PhoneGap is free, but it requires additional software from a specific platform, such as the iphone sdk,android Android SDK for iphones, etc.

For detailed methods, see: Http://phonegap.com/start#android

Pros: Add SDK in Eclipse, programming freedom, perfect fit for different device screen size, suitable for master use.

Cons: Without using layouts, loading pages directly and not adding ads.

iii. online generation using Rexsee (http://www.rexsee.com)

Rexsee is an open source Android development platform that enables developers to standardize web development patterns and quickly implement mobile applications using HTML5, CSS3, and JavaScript. Will HTML will be Android. All you have to do is upload the good HTML5 application to the Rexsee server, and soon it will be compiled into the standard APK installation file.

Advantages: One-click Generation, suitable for ordinary people to use

Cons: Direct encapsulation, unable to add ads.

iv. Appmobi Html5 XDK online generation (using the PhoneGap plugin http://www.appmobi.com/)

A Google Chrome plugin, after installation, to build a new project, and then put the developed HTML5 app into the specified folder, can be directly encapsulated into the APK file, using the PhoneGap SDK, but also provide real-time preview, this is not the other way to do things.

Four ways to turn HTML5 Web apps into Android apps