Cordova WebView Issues Android 4.3.X and below ( pre kit kat)

Today @alexbergin and I had an issue with one of our mobile apps that simple is a cordova wrapper that loads a WebView to show a website formatted for mobile devices.

The application worked fine on all devices except for Android pre kit kat , so thats’ Jellybean and below. There was strange issues with SVG graphics , javascript menus that slided in were just going crazy, it just didn’t function as expected.

Why ?

Cordova on Android 2.3 all the way up to Android 4.3 uses the stock Android browser to display applications. Luckily I have two phones I use to test.

Samsung Galaxy S4 – Android 4.3 (Jelly Bean)
Nexus 5 – 5.0.1 (Lollipop)

We could see the issues loading the stock web browser so worked out it was something to do with the WebView being used by Cordova to render the page.

Ok So how do we fix it ?

Like most things we are not first to have issues, so a little bit of google-ing pointed us to the cordova plugin webview-plus

Installing the plugin by using the cmd line didnt seems to work at time of writing this so we opted for the manual method.

We had a couple of issues when trying to build;

Issue 1;

\build.xml:601: The following error occurred while executing this line: \plugins\com.ludei.webview.plus\android\build.xml:55: sdk.dir is missing. Make sure to generate local.properties using ‘android update project’ or to inject it through the ANDROID_HOME environment variable.

Making sure you set the ANDROID_HOME environment variable will fix that problem.

Issue 2;

\build.xml:601: The following error occurred while executing this line: \build.xml:542: Unable to resolve project target ‘Google Inc.:Google APIs:19’

This required some extra SDK compnents to be installed as per the following blog post

Issue 3;

We then had the app starting but then crashing before it would load anything up. This required that we did an ‘ant release’ on the plugins source as discussed in the webview project

This should then get your application up and running , we did notice we had some other error with SSL pages not showing that didn’t have a valid certificate but we simply removed https in these situations as it wasn’t important in our scenario.

Hope that helps someone else from going mad 🙂

Advertisements

Debugging Phonegap on Android With Chrome

I have been working on a project that involves phonegap at work and I was going crazy trying to sort out some of the strange design problems when publishing my application to a physical mobile device.

There are tools out there like ripple for emulating phonegap , you can even use the chrome tools to set the device and emulate it to a fashion, but it always looked different on the physical phone ( arrrrrrrrrrh! moments ).

So how do we solve this ?

Ok, lets first outline some of the prerequisites as I hate following a post to find that it wouldn’t work because I didn’t have the correct versions anyway.

Prerequisites

  • Phonegap 3.3 ( or higher)
  • Android Device (kitkat or higher)
    *note your device needs to be in developer mode.
  • USB Cable (normal charger cable)
  • Chrome (30 or higher)

Required project changes.

In your ‘AndroidManifest.xml’ you will need to make sure you are targeting the SDK version 19 (kitkat).

<uses-sdk android:minSdkVersion="15" android:targetSdkVersion="19" />

The ‘project.properties’ will also need to target the correct Sdk Version. Alter the target as follows;

target=android-19

Phonegap basically wraps your HTML into whats called a WebView, so the next step is to enable debugging for this special view.

Update your main java file (default activity) and include the following imports to the top of the file.

import android.os.Build;
import android.webkit.WebView;

Then within the onCreate method you can enable debugging buy checking for the build version and enabling debugging for the WebView;

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}

You are ready to then build your project and publish it to your device.

Inspecting from Chrome.

Your can start your app on the mobile now or later , but you must make sure you have it connected via the normal USB cable.

In chrome type the following address to list the connected devices.

chrome://inspect/#devices

You should then see your device and project name shown after the WebView.

phonegap-chrome-debug

Clicking the inspect link then loads up the wonderful Chrome Dev tools we ahve all come to love and now you can see and change the HTML that is running within the Phonegap framework ( pretty cool ).

Happy Debugging…

Neil