Monday, June 13, 2011

How to run HTML5 app from Android app? Android + WebView + HTML5 + Java Script + Web DB

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.

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.


References:
HTML5 Database API Support in an Android WebView
Link: http://www.rohanradio.com/html5-database-api-support-in-an-android-webv

18 comments:

  1. 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.
    android application development

    ReplyDelete
  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 media player

    ReplyDelete
  3. I want html5 camera sample program plz do that

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. This comment has been removed by the author.

      Delete
  4. Thanks 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.

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

    ReplyDelete
  5. Hi Rashid Noorani. Thanks you for sharing this with us!

    I'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?

    ReplyDelete
  6. 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.

    ReplyDelete
    Replies
    1. Why do you need to create a file locally anyways? Why can't you use local storage instead?

      Delete
  7. Anyone 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.

    ReplyDelete
  8. the 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

    http://techighost.com/tutorial-actionbar/

    ReplyDelete
  9. HTML5 Development
    is 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.

    ReplyDelete
  10. Hi,

    I tried out the code above but i am experiencing an error "webstorage cannot be resolved to a type".

    please help.

    ReplyDelete
    Replies
    1. Just add:
      import android.webkit.WebStorage

      Delete
  11. thanks for the article, it was incredibly helpful, and phantomjs rocks when it comes to making pdf files. html5

    ReplyDelete
  12. it's not working on android 4.2.1

    ReplyDelete
  13. In HTML we use link command in Android how to generate link.. Give one example

    ReplyDelete