CODEWITHSUNDEEP
androidgoogle-chromecordova
Jerome P Mrozak
Jerome P Mrozak

Reputation: 1957

How do I ensure Android phonegap/cordova apps use Chrome webviews?

I'm writing a game app that twists SVG graphics until they cry "Uncle!". The program works OK on an iPad (safari/webkit) when hosted from a web server, for which no more need be said here. It also works OK on an Android tablet when hosted from a web server, as long as a recent version of Chrome (like v.25 or later) is used.

The program doesn't access the internet at all, but plays with its SVG graphics, runs Javascript and stores status in HTML5 localStorage().

If I run the program on the "default browser" of older Android tablets the SVG graphics don't get handled correctly, thus my requirement for a recent version of Chrome on the tablet.

I have just created an APK for my app, and find that it doesn't use the Chrome browser when I install it on my really-new Android tablet. Rather, it seems to use a browser embedded within the APK, or at least called from the APK for which remnant libraries exist in the tablet.

My aim with the APK is to make my code run displayed by a recent webkit browser, which seems to mean running in the Chrome environment.

For my question, I need to change something. But what?

Do my dear readers have a clue for me?

Thanks,
Jerome.

Upvotes: 45

Views: 46603

Answers (6)

smets.kevin
smets.kevin

Reputation: 1618

I would recommend Crosswalk, however, since 19th of March 2017, it has been declared EOL (more info below). Still, it's by far the most stable solution out there, our team currently uses it in a production application. Put simply, it packages a Chromium based webview inside your apk and it's backed by Intel. You can use it starting from Android 4.X.

Official sales pitch:

Crosswalk is a web runtime for ambitious HTML5 applications. It provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices, with support for both Android and Tizen.

For Cordova 4.0.0 and higher there is an official Crosswalk plugin, making it really easy to get up and running: https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview

If you have your Cordova project running, all you need to do is

cordova plugin add cordova-plugin-crosswalk-webview --save

to add the Crosswalk webview plugin. The next build will fetch all dependencies and package everything nicely.

Android 4.4.x

On Android 4.4 your hybrid app will run on a Chromium based WebView, however, it will be stuck on the same version forever (if I'm not mistaken it's Chromium 33). In my opinion it would be best to use Crosswalk here as well.

Android 5.0+

If you code for Android 5.0 and above, the Chromium WebView will be updated through Google Play. More info here: http://developer.android.com/about/versions/lollipop.html#WebView

CrossWalk version 20 and up

CrossWalk will drop support for Android 4.0.X starting with version 20. If you really need to keep 4.0.X in your support matrix, do not upgrade. I would recommend to build another APK for Android 5.X and above which no longer includes CrossWalk at all. More info on this

Crosswalk v23 is the last release (EOL)

Crosswalk has decided to release one last stable version in January of 2017, version 23. This ends official support for Crosswalk and leaves bugfixes and such to the community. More info in the blogpost

Notice!

I found that running my mobile hybrid app had better graphical performance on Crosswalk than when I relied on the system webview (tested on a Sony Xperia ZL, which is on Android 5.x, so the webview is updated through the play store). Why that is, I've no idea yet, maybe Crosswalk configures the Webview in certain ways? This needs further investigation.

Upvotes: 54

givanse
givanse

Reputation: 14953

This looks like a promising option: Crosswalk + Cordova.

Benefits:

  • Use Cordova API
  • Use Crosswalk API
  • Cordova will use Crosswalk as its webview
  • Crosswalk does not use the Android webview, its based on Chromium

Github repo: https://github.com/crosswalk-project/crosswalk-cordova-android.

Upvotes: 5

mikemaccana
mikemaccana

Reputation: 123540

Updated answer for 2014: Android 4.4 and newer use Chrome webview by default. This is currently based around Chrome version 30.

Upvotes: 4

Jerome P Mrozak
Jerome P Mrozak

Reputation: 1957

It turns out that my Javascript was wrong. Things work OK on old browsers when I avoid a certain bug. I found it by being able to load an ancient version of Safari for Windows.

My problem was something like this: 

var newValue = parseInt("030");

This returned 24, because "030" is base 8, right?

I changed things to force the base, and things are now OK:

var newValue = parseInt("030", 10);

Upvotes: -6

albi90
albi90

Reputation: 71

try https://github.com/thedracle/cordova-android-chromeview its a new project and needs more work but combines the chromeview project with cordova to embed chromium in a cordova android application

Upvotes: 7

Matt Gaunt
Matt Gaunt

Reputation: 9831

One option would be to launch the Chrome browser with a link to the appropriate site.

This isn't a great user experience, but might get you some of the way there.

You can check for and launch the Chrome Browser with something along the lines of:

    String url = "http://www.totallyawesomeurl.com";
    String packageName = "com.android.chrome";

    Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
    browserIntent.setPackage(packageName);
    browserIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

    List<ResolveInfo> activitiesList = context.getPackageManager().queryIntentActivities(
            browserIntent, -1);
    if(activitiesList.size() > 0) {
        // Found the browser on the device, launch it
        context.startActivity(browserIntent);
    } else {
        // The browser isn't installed, so we should prompt the user to get
        Intent playStoreIntent = new Intent(Intent.ACTION_VIEW);
        playStoreIntent.setData(Uri.parse("market://details?id="+packageName));
        playStoreIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        context.startActivity(playStoreIntent);
    }

It's worth noting that Chrome for Android is only available for ICS devices and above, so you might want to ensure you set the minimumTargetSDK to 14 and perhaps switch to using Opera for older version of Android if you site works in Opera which has package name "com.opera.browser"

Upvotes: 0

Related Questions