As a web developer, HTML5 makes me excited because it can bring desktop application functionality into the browser. But in the country, looking at the IE8 version of the following browsers, feel that the large-scale use of HTML5 technology, the day is still elusive. But in the face of iOS and Android platforms such as mobile phone users more and more, based on the WebKit core Mobile browser must be able to let HTML5 first-scale application. This will have a significant impact on the development of mobile WEB applications.
As a very optimistic about the future of mobile phone network, I have been studying the development of Android platform applications, perhaps because I am more familiar with HTML and CSS, JS, and by the previous use of HTML and VC development program, I also prefer to use HTML to do the Android program UI ....
09, in the development of "China" game, using the Google Gear plug-in to do a lot of offline applications, unfortunately gear has not been updated development, replaced by HTML5. The following is a description of the local storage of HTML 5-based Web applications, no more nonsense, an example of everything.
One, offline application cache HTML 5 Offline application Cache
• Add MIME type support on the server: Text/cache-manifest
If you added under Apache:
AddType text/cache-manifest Manifest
If it is nginx, add the following:
Text/cache-manifest manifest;
Or generated by a dynamic program:
1
Header (' content-type:text/cache-manifest; Charset=utf-8 ');
• Create Name.manifest:
New manifest file manifest
CACHE MANIFEST
# This is a comment.
# Cache manifest Version 0.0.1
# If You change the version number in this comment,
# The cache manifest is no longer byte-for-byte
# identical.
/app/static/default/js/models/prototype.js
/app/static/default/js/controllers/init.js
NETWORK:
# all URLs that start with the following lines
# is whitelisted.
http://a.com/
CACHE:
# Additional items to cache.
/app/static/default/images/main/bg.png
FALLBACK:
demoimages/images/
• Add manifest attribute to
After you have created the manifest file, you need to declare it in the HTML document:
Declaration Manifest file Manifest
<!doctype html>
<meta charset= "UTF-8"/>
<meta name = "Viewport" content = "width = device-width, user-scalable = no" >
<title>NoteBook</title>
<body>
</body>
Second, Key-value Storage
Third, Using the JavaScript Database
Use WebView to do HTML5-based apps under Android
See below Androidmanifest.xml
< XML version= "1.0" encoding= "Utf-8"?>
<manifest android:versionname= "1.0" android:versioncode= "1" package= "Com.xinze.joke" xmlns:android= "/http Schemas.android.com/apk/res/android ">
<application android:label= "@string/app_name" android:icon= "@drawable/icon" >
<activity android:label= "@string/app_name" Android:theme= "@android: Style/theme.notitlebar" android: Configchanges= "Orientation|keyboardhidden|navigation" android:name= ". Joke ">
<intent-filter= "" >
<action android:name= "Android.intent.action.MAIN" >
<category android:name= "Android.intent.category.LAUNCHER" >
</category></action></intent>
</activity>
</application>
<uses android:name= "Android.permission.INTERNET"-permission= "" >
</uses></manifest>
Attention:
<uses android:name= "Android.permission.INTERNET"-permission= "" ></uses>
, allow network applications, must!!
Android Main program code:
Package Com.xinze.joke;
Import android.app.Activity;
Import Android.app.AlertDialog;
Import Android.app.AlertDialog.Builder;
Import Android.content.DialogInterface;
Import Android.os.Bundle;
Import android.view.KeyEvent;
Import Android.view.View;
Import Android.view.Window;
Import Android.view.WindowManager;
Import Android.webkit.JsPromptResult;
Import Android.webkit.JsResult;
Import android.webkit.WebChromeClient;
Import Android.webkit.WebView;
Import android.webkit.WebViewClient;
Import Android.webkit.WebStorage;
public class Joke extends Activity {
@Override
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Final WebView WV = new WebView (this);
Override the default Back button to replace the View history page in WebView
Wv.setonkeylistener (New View.onkeylistener () {
@Override
public boolean OnKey (View v, int keycode, keyevent event) {
if (event.getaction () = = Keyevent.action_down) {
if ((keycode = = keyevent.keycode_back) && wv.cangoback ()) {
Wv.goback ();
return true;
}
}
return false;
}
});
Setting up JavaScript support
Wv.getsettings (). Setjavascriptenabled (True);
Wv.getsettings (). Setjavascriptcanopenwindowsautomatically (True);
Wv.getsettings (). Setdatabaseenabled (True);
Wv.getsettings (). SetDatabasePath ("/data/data/com.xinze.joke/databases");
Create a Webviewclient object
Webviewclient WVC = new Webviewclient () {
@Override
public boolean shouldoverrideurlloading (WebView view, String URL) {
Wv.loadurl (URL);
Remember to consume this event. To the unknown friend to explain again, Android returns true means that the end of it, the event will not bubble passed, we call it consumption
return true;
}
};
Set Webviewclient Object
Wv.setwebviewclient (WVC);
Create Webviewchromeclient
Webchromeclient WVCC = new Webchromeclient () {
Handling Alert Events
@Override
public boolean Onjsalert (WebView view, string URL, String message, final Jsresult result) {
Build a builder to display the Alert dialog box in a Web page
Builder builder = new Builder (joke.this);
Builder.settitle ("Laughter Dies Not Life");
Builder.setmessage (message);
Builder.setpositivebutton (Android. R.string.ok, New Alertdialog.onclicklistener () {
@Override
public void OnClick (Dialoginterface dialog, int which) {
Result.confirm ();
}
});
Builder.setcancelable (FALSE);
Builder.create ();
Builder.show ();
return true;
}
Handling Confirm Events
@Override
public boolean onjsconfirm (WebView view, string URL, String message, final Jsresult result) {
Builder builder = new Builder (joke.this);
Builder.settitle ("delete Confirmation");
Builder.setmessage (message);
Builder.setpositivebutton (Android. R.string.ok, New Alertdialog.onclicklistener () {
@Override
public void OnClick (Dialoginterface dialog, int which) {
Result.confirm ();
}
});
Builder.setneutralbutton (Android. R.string.cancel, New Alertdialog.onclicklistener () {
@Override
public void OnClick (Dialoginterface dialog, int which) {
Result.cancel ();
}
});
Builder.setcancelable (FALSE);
Builder.create ();
Builder.show ();
return true;
}
Handling Prompt Events
@Override
public boolean onjsprompt (WebView view, string URL, String message, String defaultvalue,
Jspromptresult result) {
Look at the default effect
Return super.onjsprompt (view, URL, message, defaultvalue, result);
}
@Override
public void Onexceededdatabasequota (string url, string
Databaseidentifier, Long Currentquota, long estimatedsize, long
Totalusedquota, Webstorage.quotaupdater quotaupdater) {
Quotaupdater.updatequota (204801);
}
};
Wv.loadurl ("http://192.168.1.14/index.html");
Set Setwebchromeclient Object
Wv.setwebchromeclient (WVCC);
Setcontentview (WV);
}
}
When using JavaScript Database, you need to pay special attention to: Setdatabaseenabled and onexceededdatabasequota!
A companion tour, a free dating site: www.jieberu.com
Push family, free tickets, scenic spots: www.tuituizu.com
Android and HTML5 Development mobile app (reprint)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
