How To: Implement HTML5 Storage on a WebView with Android 2.0 | November 5th, 2009
So, after many days of using DDMS to poke around the Emulator subsystem I saw the way the new com.android.browser activity interacted with the data. I’ve took a TestCase code (which is like PhoneGap for Android, but stripped donw with only the WebView component), and hacked around with the old stickies example so that I can get it to work. So, here’s the steps to do it:
Step 1: Create a WebView, similar to the one in the PhoneGap source.
Step 2. Get the webSettings, and set the Database Path. The path should be the path to your databases, which will be /path/path/your_package_name/.
appView.setWebChromeClient(new WebClient(this));
WebSettings settings = appView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setDatabaseEnabled(true);
settings.setDatabasePath("/data/data/org.infil00p.testcase/app_database");
Step 3: Create a WebChromeClient, and override the onExceededDatabaseQuota method. This is called when you first open the application because there’s initially no database setup. This will allow you to set the quota in Java. Since this was test code, I just threw an arbitrary value in here.
final class WebClient extends WebChromeClient {
Context mCtx;
WebClient(Context ctx)
{
mCtx = ctx;
}
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater)
{
Log.d(LOG_TAG, "We exceeded the quota");
quotaUpdater.updateQuota(100000);
}
}
OK, we now have a database that we can store things in. When dealing with Android Databases, remember to do all your database debugging on the device or a rooted phone, since you can’t get access to the SQLite Databases from adb with the standard firmware on consumer devices, and this includes the latest images for the Android ADP1 and the Google Ion phones. I’ve just gotten this to work now, and I haven’t tested this method with the Geolocation Database, but I would assume that it would be similar, except that there would just be the Cached Location. What I found odd about this setup was the fact that I couldn’t write the database directly to the emulated SD Card on the device, which would make sense. I’m definitely going to play with this more, and refine it so that it’s less hacky and more polished. However, the stickies example works now, and we will try porting existing iPhone Applications that use this SQLite storage soon.
November 9th, 2009 at 9:52 am
[...] Blogs Joe Bowser’s Blog RSS « How To: Implement HTML5 Storage on a WebView with Android 2.0 [...]
November 13th, 2009 at 4:25 am
hi Joe. I’ve been trying to figure this out myself and can’t seem to make it happen.
I believe I’m just not getting the location right. I get the “/data/data/package_name” part, but unsure about the file name part.
first, does the filename have any correlation to the name of the database in the HTML? (i.e. do they both have to be the same or is it irrelevant)
and do I need to include a stub of a database in my apk?
last what methods do I need to import? is android.webkit.WebStorage and android.webkit.WebStorage.QuotaUpdater enough?
November 16th, 2009 at 7:11 am
Hey
The filename is actually a directory name. Each site will have its own database, and this will be generated by WebKit. WebKit just needs to know where to store it.
As far as what you need to import, WebStorage alone should be enough. Putting a stub of a database in the APK isn’t needed, and will just increase your application size.
If you look at http://github.com/bowserj/phonegap/tree/android_2.0 you can see a working example of this.
November 17th, 2009 at 8:36 am
figured out my problem. the value for updateQuota must be larger than the size given to openDatabase in javascript.
works like a charm now.
October 16th, 2010 at 8:09 pm
Thanks Joe,
It’s Work, and finally i can use html5 database feature on webkit :)
May 4th, 2011 at 3:40 am
Hello,
I have a problem with the local storage for a webview which may
display an HTML5 app, but the test.html file informs me that local
storage is’nt supported by my browser…
Please take a look at my code :
package com.test.HelloWebView;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebStorage;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class HelloWebView extends Activity {
WebView webview;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webview = (WebView) findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new HelloWebViewClient());
webview.loadUrl(“file:///android_asset/test.html”);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDatabaseEnabled(true);
String databasePath =
this.getApplicationContext().getDir(“database”,
Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(databasePath);
webview.setWebChromeClient(new WebChromeClient() {
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater
quotaUpdater) {
quotaUpdater.updateQuota(100000);
}
});
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack())
{
webview.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
private class HelloWebViewClient extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String
url) {
view.loadUrl(url);
return true;
}
}
}
Thanks,
Thomas.
July 6th, 2011 at 8:00 pm
hi Joe:
i have a question that i would like to ask:
can i let the html5 page run in the WebView access my database which was created by the app.
it’s mean : can i let the app code and the html page run in the webview share the same database?