Editing a Phonegap app directly on your device without reinstalling or rebuilding

How often have you built a large Phonegap app, copied it to your device, played with it for a while and then discovered a tiny bug? Something that you just know is just a single line, or even a single character change...

Normally to test your fix you'd need to make the change in your IDE, and re-build and re-upload the app to your device using Xcode. This can take ages if your app has a lot of content.

If you're using Phonegap build, it can take even longer as you'll have to wait for the whole app to build and then download again.  This can be particularly painful if your one line change takes a few goes to get right (especially anything UI or animation-related).

So what's the solution? Well, it's actually possible to connect your iPhone to your Mac, edit your JS file (or any other file) and re-save, and run the app again.

I was surprised to discover that this is possible - I'd assumed the code signing verification system built into the iDevice would notice that the bundle had changed and refuse to run but it doesn't. At least not in my experience.

Here's how to do it (note commercial software required, though the demo does actually work. I don't work for them and am not paid!)

• Download iExplorer 3 from here 
• Connect your device
• Open the Apps folder and find your app.
• Right-click the app and choose 'Mount as Disk'

• A new drive will appear. Open it.
• Inside you'll see a bundle, e.g. com.example.myapp.
• Right-click the bundle and choose 'view package contents'

• Open the www folder (or whichever folder your app uses for PhoneGap content)

• Open the JS file you want to change in your favourite text editor (we use Sublime Text 2.app)
• Save changes. This writes it straight back to the device!

The above instructions are for Mac, but I suspect pretty much the same process will work for PC too.

Now you can re-start your app and the new code should be live! 

This technique works for HTML, JavaScript, CSS and other text files. It most likely won't work with PNG files as the app build process compresses them into a proprietary Apple format (you can convert, but it is fiddly). I haven't tried JPG, MP4, files etc. Your milage may vary.

Dealing with Cacheing issues

Note that quite regularly you'll find the iDevice still runs the old version of your JS file. This is due to the UIWebView caching the JS file.

The easier way to fix this is to force the iDevice to reload the Javascript file by changing the link to the JS file.   To do this, edit your main HTML file using the technique above.

Change the link from (for example)

<script src="myfile.js" type="application/javascript"></script>

To:

<script src="myfile.js?_cache=123" type="application/javascript"></script>

Each time you change the myfile.js, also update the _cache=123 number and you'll always get the latest version. _cache doesn't actually mean anything, you can choose whatever you want.

Get version number of live app on App Store in Phonegap app

A nice feature you might want to add to your iOS app is to notify the user when a new version is available on the App Store. Of course the user can go to the App Store manually and install the update, but we've noticed quite a few users don't do this very often. Some carefully-judged prompting is bound to help.

It turns out there's an API that Apple run that can return, in a handy JSON or JSONP format, the metadata for a particular app on the app store. This includes both the version number of the app, and even better, the 'what's new in this version' text.

You can use this information on your app's startup to check if a new version is available, and tell the user what's in it, and then finally, link them to the update page for the app.

Here's some bare-bones bits of example code to get you going. You'll need to know your app's Apple ID (e.g. 387022138). You can find this in the iTunes Connect interface). I'm also assuming that you're using jQuery or Zepto in your app.

The below also works in the browser.

// Alert the version number and release notes of an app.

    $.ajax({
        url:"http://itunes.apple.com/lookup?id=<APPLE ID HERE>&callback=?",
        success:function(data) {
            if (data && data.results && data.results.length) {
                alert(data.results[0].version);
                alert(data.results[0].releaseNotes);
            }
        }
    });

Here's the full list of data you might want to use:

Screengrab showing properties of the response from the API call. Click to view full size.

To open iTunes looking at your App's update page open the following URL:

itms-apps://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftwareUpdate?id=<APPLE ID HERE>&mt=8

Android Phonegap :active CSS pseudo class doesn't work. A workaround..

If you're building a cross-platform Phonegap app, you may well run in to the issue that your CSS :active pseudo-classes simply don't work when running on Android. They may work on your a (link) elements, but not on div or others.

Luckily there's a simple workaround. This workaround will continue using the fast, native, JavaScript-free :active class on iOS, and drops back to using the JavaScript on Android.

• First, in your CSS, find every instance of the :active class. Add another rule that maps a class called fake-active to the same style.

E.g.

.my-button:active {

 background-color: blue;

}

Becomes:

my-button:active, .my-button.fake-active {

 background-color: blue;

}

• Now, in your document ready event, when running on Android only, attach event handlers for touchstart and touchend to all the classes that have used :active. Make these add and remove the fake-active class.

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(".my-button")
    .bind("touchstart", function () {
        $(this).addClass("fake-active");
    })
   .bind("touchend", function() {
        $(this).removeClass("fake-active");
    });
    .bind("touchcancel", function() {
        // sometimes Android fires a touchcancel event rather than a touchend. Handle this too.
        $(this).removeClass("fake-active");
    });
}

Note that you can use the $(".my-button, .my-other-element, .even-more-elements") jQuery syntax to bind the events to other classes too.

Edit AndroidManifest.xml in Android Phonegap Build App

Phonegap build is an awesome service that allows you to convert a bunch of HTML files into actual mobile apps for iPhone, Android, Blackberry, and more. It's great, so great in fact that Adobe recently bought the company behind it (Nitobi).

You can read more about the details at their site, I won't repeat it all here.

I've been playing around with the Android version of this for a client project I've been working on, and came up with a bit of a problem.  There's a file called AndroidManifest.xml that every Android app includes that sets up loads of important stuff such as the intent filters and the permissions needed to run the app.

Phonegap build allows you to change some of these settings using it's config.xml system.  But for other settings you are, it seems, stuck.  I needed to change the intent filter for one of my activities, and there was no way that the config.xml could do this. I posted on their forums and the very helpful guy said they may add the feature in a future release.

In the meantime though, I found another way.

It's possible to decompile the apk file that you download from Phonegap Build, change the AndroidManifest.xml file, re-compile, re-sign, and install it onto your device.

Getting the tools we need
I'm assuming that you have the Android SDK installed, if not install it and follow the instructions to put the build tools into your path.
First you need to download apktool.  This great tool allows you to decode and re-encode apk files. Download it and follow the instructions to install for your platform.
We're also going to use:

• jarsigner - part of the Java JVN (I have a binary at /usr/bin/jarsigner) 
• adb - part of the Android SDK installation (my binary is at ~/android/android-sdk-mac_x86/platform-tools/adb)

Extracting the APK file

• Download the apk file for your app from Phonegap build.
• Open up the terminal and type (substituting your folders for path/to and filenames where appropriate)

apktool d path/to/yourApp.apk path/to/output-folder

• This will extract the contents of the app into the folder output-folder.
• The AndroidManifest.xml file will be at the root of that folder.

Now you can make whatever changes to the AndroidManifest you need (setting intent filters etc).

Re-building the APK file

• Once you've finished making your changes, you can rebuild the APK file from the contents of the output-folder

apktool b path/to/output-folder path/to/yourAppV2.apk 

Re-signing the APK
If you try to install the new apk file you'll find that it fails with an invalid certificate error.
This is because apktool doesn't re-sign the apk.  It's pretty easy to re-sign the APK with the development certificate (which is what Eclipse uses when making APKs for testing).

Here's how:

jarsigner -verbose -keystore ~/.android/debug.keystore path/to/yourAppV2.apk androiddebugkey

By default the development certificate is in the ~/.android folder. When you run this, it'll ask for a passphrase - use android.

Your APK is now ready for installation!

adb install path/to/yourAppV2.apk