I was trying to make HTML 5 sample run from Android app. I was trying to use local database feature of HTML 5 app which works well with my Android 2.3.3 version device.
Following code worked for me:
WebView webview = (WebView) findViewById(R.id.webview);
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2); // try to keep quota size as big as possible else database will not get created in HTML 5 app
}
});
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setDatabaseEnabled(true);
String databasePath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(databasePath);
Issue: I was using following java script code to create database:
var database = window.openDatabase("total", "", "main total", 1024*1024);
Some how database object in HTML 5 was always coming as NULL both in emulator and device. Same HTML 5 code was working properly in Crome browser. In the end, I drilled down to quotaUpdater.updateQuota() method, I tried various quota sizes but at the end "estimatedSize * 2" worked for me which is mentioned in above code sample.
I was actually working on hybrid android app. ( Hybrid = Android Native + HTML5) I have explained HTML5 web database example in separate blog post: http://rashidnoorani.blogspot.com/2011/06/how-to-use-web-database-feature-of.html.
Following HTML5 sample can be used to test above Android WebView sample app:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Sample</title>
</head>
<body>
<form method="get" id="employee_form">
<div>
<label for="1">Employee Id</label>
<input type="number" min="1" id="id" name="id" size="5" step="1" placeholder="Enter employee Id" />
</div>
<div>
<label for="2">Employee Name</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter employee name" />
</div>
<div>
<label for="3">Contact</label>
<input type="number" id="contact" name="contact" size="12" placeholder="Enter contact number" />
</div>
<div>
<label for="4">E-mail</label>
<input type="email" id="email" placeholder="Enter email address" size="30"/>
</div>
<div>
<input type="submit" value="Save Employee Record" />
</div>
</form>
</body>
</html>
You can use www.html5test.com to check if specific HTML5 feature is supported by your browser.
References:
HTML5 Database API Support in an Android WebView
Link: http://www.rohanradio.com/html5-database-api-support-in-an-android-webv
Following code worked for me:
WebView webview = (WebView) findViewById(R.id.webview);
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2); // try to keep quota size as big as possible else database will not get created in HTML 5 app
}
});
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setDatabaseEnabled(true);
String databasePath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(databasePath);
Issue: I was using following java script code to create database:
var database = window.openDatabase("total", "", "main total", 1024*1024);
Some how database object in HTML 5 was always coming as NULL both in emulator and device. Same HTML 5 code was working properly in Crome browser. In the end, I drilled down to quotaUpdater.updateQuota() method, I tried various quota sizes but at the end "estimatedSize * 2" worked for me which is mentioned in above code sample.
I was actually working on hybrid android app. ( Hybrid = Android Native + HTML5) I have explained HTML5 web database example in separate blog post: http://rashidnoorani.blogspot.com/2011/06/how-to-use-web-database-feature-of.html.
Following HTML5 sample can be used to test above Android WebView sample app:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Sample</title>
</head>
<body>
<form method="get" id="employee_form">
<div>
<label for="1">Employee Id</label>
<input type="number" min="1" id="id" name="id" size="5" step="1" placeholder="Enter employee Id" />
</div>
<div>
<label for="2">Employee Name</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter employee name" />
</div>
<div>
<label for="3">Contact</label>
<input type="number" id="contact" name="contact" size="12" placeholder="Enter contact number" />
</div>
<div>
<label for="4">E-mail</label>
<input type="email" id="email" placeholder="Enter email address" size="30"/>
</div>
<div>
<input type="submit" value="Save Employee Record" />
</div>
</form>
</body>
</html>
You can use www.html5test.com to check if specific HTML5 feature is supported by your browser.
Current web browsers support HTML5 to varying degrees. Modernizr JavaScript library built to make browser detection of HTML5 features easier. It can be used to check if certain HTML5 features required by the app is supported by the browser or not.
HTML5 Database API Support in an Android WebView
Link: http://www.rohanradio.com/html5-database-api-support-in-an-android-webv
Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.
ReplyDeleteandroid application development
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDeletehtml5 media player
I want html5 camera sample program plz do that
ReplyDeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeleteThanks for the comment Rajitha. I will try to make HTML5 camera sample program for you when I get time. But as far as I know you will need to use Phonegap or similar tool kit to use Camera from HTML5.
ReplyDeleteLet me do research and see if in recent version of Androind (Android 4+) any feature is introduced which can be used to access Camera from HTML5.
Hi Rashid Noorani. Thanks you for sharing this with us!
ReplyDeleteI've tried your code in my project and works perfectly!
But, I need my android app to access the database created by the app in the webview. Could you, please, tell us how can we share a database between android native application and a webview?
Dear Rashid .Can I create a Local File on a Android device using HTML5.I m working on a local Offline Application & i need to store the result on the device Using any kind Of File.
ReplyDeleteWhy do you need to create a file locally anyways? Why can't you use local storage instead?
DeleteAnyone have any ideas how to handle this issue in a pure web app (not native)? We have a few devices that return db=null after performing window.openDatabase. The window.openDatabase method is available, that much I know. No matter what value I use for maxSize, I still get db is null.
ReplyDeletethe actionbar is very important and crucial when we normally talk about andriod apps.this is usually helpful.i found a example how to use it.hope this will usefule
ReplyDeletehttp://techighost.com/tutorial-actionbar/
http://techighost.com/tutorial-actionbar/
ReplyDeleteHTML5 Development
ReplyDeleteis the hottest web development platform that takes the experience of building the web pages to a different level. Not only that, it also enhances the surfing experience.