GWT & Phonegap 1.6 - Issues with loading on android

Some of you might be experiencing issues while loading your GWT App in a phonegap environment.

The app might not be starting at all if you are using android 4.x with phonegap and you simply see a white screen instead. A suggested workaround (that many use) is to change to the cross site iframe linker in your gwt compile, which would mean that you would be using a different bootup mechanism for your gwt app. Which is a workaround for this situation and can help, but causes other issues.

So I did a little digging the last weekend and took a close look at the boot load of a GWT app in a phonegap environment. The standard GWT linker creates an iframe in which it loads the content of the GWT Compiler (a html file with javascript). This page is actually what you see in your phonegap app as a blank white page.

By default phonegap on android thinks that all local navigation (urls which start with file://) should be handled by phonegap and should load the url in the browser. This is fine for apps that need navigation like jquerymobile apps, but its not a good idea for GWT apps since it interferes with GWT bootup.

This is what happens in the CordovaWebClient by default:

// If our app or file:, then load into a new Cordova webview container by starting a new instance of our activity.
// Our app continues to run.  When BACK is pressed, our app is redisplayed.
if (url.startsWith("file://") || url.indexOf(this.ctx.baseUrl) == 0 || ctx.isUrlWhiteListed(url)) {
                this.ctx.loadUrl(url);
}


So we need to prevent this by implementing our own web client:

package de.kurka.cordova;

import org.apache.cordova.CordovaWebViewClient;

import org.apache.cordova.DroidGap;

import android.webkit.WebView;

public class GWTCordovaWebViewClient extends CordovaWebViewClient {

public GWTCordovaWebViewClient(DroidGap ctx) {

super(ctx);

}

@Override

    public boolean shouldOverrideUrlLoading(WebView view, String url) {

       if(url.startsWith("file://"))

       {

       return false;

       }

       

       return super.shouldOverrideUrlLoading(view, url);

       

    }

}

And we need to override the init method of our man activity to use it like this:

package de.kurka.cordova;

import org.apache.cordova.CordovaChromeClient;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

import android.webkit.WebView;

public class HelloCordovaActivity extends DroidGap {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

    }

    

    @Override

    public void init() {

    super.init(new WebView(this), new GWTCordovaWebViewClient(this), new CordovaChromeClient(this));

    }

}

This fixes the white screen issue with phonegap 1.6 and GWT apps.