October 31, 2015

Visual Studio TACO - Cordova WebView containing jQuery

If you're using Visual Studio Tools for Apache Cordova (TACO), you may notice a problem if you want to display an external webpage using the Cordova WebView, if the external page uses jQuery. Once you build and start debugging your app, as soon as you try to display the external page, an exception will be thrown in the jquery.js file used by the external page.

Before we look at what the problem is, here's a quick review of displaying external web pages in a Cordova app:

  • Whitelist the page/domain in config.xml in the Domain Access section under the Common tab

  • In JavaScript, call window.open(whitelistedUrl)

The good news about this problem, is it's not really a problem - except when you're debugging. After failing every time I tried testing opening the new window, I swapped in the non-minified jquery file (in the external page) to take a look at where we were failing. It ends up in the jquery file itself, it does a try-catch that should throw an error for all non-gecko browsers, then swallows the error:

try {
 matches.call( div, "[test!='']:sizzle" );
 rbuggyMatches.push( "!=", pseudos );
} catch ( e ) {}

...But it ends up that even though this error is swallowed, The Visual Studio TACO debugger stops the processing at the point where the error is thrown, and even if you continue processing, it usually won't display the page. Even though this code is executed on any page on the www containing jquery, when those pages are pulled into a Cordova WebView using Visual Studio TACO debugging, processing stops and the app appears to error out for no reason.

But if you run your app in Release Mode, you'll see that the page gets pulled into the Cordova WebView just fine, now that the debugger doesn't halt on the swallowed error. So the answer is that you can't debug past the point where you pull an external page into a Cordova WebView. You'll need to test that part in release mode, and if there are any problems, you can debug the page using Chrome Dev Tools on the site itself.

If this is unacceptable, another alternative would be to look into using the Cordova InAppBrowser plugin, which has no problem with external jQuery files, but the downside is that it does pop up a new browser window.

Share |

October 22, 2015

First Take on Visual Studio Tools for Apache Cordova (TACO)

I installed the Visual Studio Tools for Apache Cordova last week to see how feasible it would be to use with an existing PhoneGap Android codebase.

I still haven't gotten to the point of publishing to Google Play yet (next post), but I thought I'd share a few of the pain points/errors I've encountered during setup and steps to resolve them:

(Note that these are specific to Android)

1) "Could not create the Java Virtual Machine" error

This is a memory issue with the JVM. The recommendation is to set your _JAVA_OPTIONS TO -Xmx512M
Full instructions

2) Error DEP10201 (No device found)

The Android emulator is a slow klunky experience. When you graduate to using your personal device to debug, you'll need to set up USB debugging. First, make sure USB debugging is enabled on your phone. On some Android phones, you first have to go to Apps..Settings..About Phone, then tap 7 times on the Build Number to enable Developer Options.
Full instructions on how to enable USB debugging on an Android phone

After enabling USB debugging on your device you will then need to install a USB driver for debugging.

So now that we're set up to test and debug on our phone, we'll look at some of the TACO nuances and the deployment process next week - hopefully with an app successfully deployed to Google Play.

Share |