Cordova / Phonegap: Live update codebase

Question

We are using Cordova along with AngularJS for iOS and Android applications.

One big disadvantage of iOS are the long review times from Apple. In Google\'s Playstore, yo

Answer 1

The Meteor framework provides exactly this functionality when combined with PhoneGap. It's even sanctioned by Apple in the latest Developer Agreement. Here are some technical details and then some about Apple's view on it.

Answer 2

I don't know of any ready made solutions for that, but it should be easy enough to program something like this on your own. Here are some points to get you started and to consider:

• If you want to distribute updates via zip, you need a nativ plugin which handles the extraction
• You might not be able to override files in the default location of your app (depending on OS). So, all files you want to update in the future have to sit in a folder your app has read/write access to (iOS: e.g. Library or Documents folder)
• Now you simply need to download the zip-package, unpack the zip to your chosen directory, and restart/reload your app.
• you will not be able to update native plugins!
• Apple probably doesn't like that, since you are able to change the whole application without passing their review process

Answer 3

I'm doing this inside my cordova app and haven't had any issues with ios app store review.

I'm using Jquery's ajax function to download both a javascript and a css file from a server that I can change without an app store approval and then I can inject those scripts once they downloaded on app startup.

I tried using the cordova File api and I'd then save the file locally, but offline support ins't the important to me at the moment and Jquery's ajax is much simpler.

Here is the jquery code I use. I have a bundle id that I use to detect if a new javascript file is available, otherwise jquery's ajax caches the previous requests to speed up download time.

This solution lets you have a subset of your code be dynamic. I still have a base set of code that is bundled with the app, along with native plugin js and native code which would need to go through the app store. But this atleast lets me push bug fixes without going through the app store.

Otherwise, I'd look at a solution like this: http://docs.build.phonegap.com/en_US/tools_hydration.md.html

function insertScript(version) {
    var scriptUrl = "";
    try {
        // get javascript file...
        scriptUrl = mobileWebServiceUrl + "/DynamicContent/Bundles/Scripts/dynamic";

        scriptUrl += "_" + bundleVersion.replace(/\./g, "_") + ".js?v=" + version;

        console.log("downloading script: " + scriptUrl);

        // Allow user to set any option except for dataType, cache, and url
        options = {
            dataType: "script",
            cache: true,
            url: scriptUrl
        };

        // Use $.ajax() since it is more flexible than $.getScript
        // Return the jqXHR object so we can chain callbacks
        return $.ajax(options).success(function(response) {
            console.log("insertScript success");
            dynamicContentScriptLoaded = true;
        });


    } catch (e) {
        //console.error(e);
        ReportError("problem downloading javscript: " + scriptUrl);
    }

}


function insertCSS(version) {
    try {
        // get css file...
        var cssUrl = mobileWebServiceUrl + "/DynamicContent/Bundles/Css/dynamic";

        cssUrl += "_" + bundleVersion.replace(/\./g, "_") + ".css?v=" + version;

        console.log("downloading dynamic css: " + cssUrl);

        $.ajax(cssUrl)
            .success(function (response) {
                console.log("successfully downloaded dynamic css");
                var script = document.createElement("style");
                script.type = "text/css";
                script.innerHTML = response;

                $('head link').each(function () {
                    if ($(this).attr('href').search('MobileFrame') > -1) {
                        $("#MobileFrameCSS").before(script);
                    }
                });

                dynamicContentCssLoaded = true;

                // TODO: implement caching at a later date
                //if (isPhoneGap())
                //    saveFile("DynamicStyles", response);

            });
    } catch (e) {
        ReportError("problem downloading css");
    }

}

Answer 4

Well, Adobe offers exactly that service in their Phonegap Build service. It's called Hydration.

The example shows using it with Android and iOS platforms, so I guess they made it compatible with the iOS Dev Program License Agreement.

If you are using Cordova, you probably will have to switch to the Phonegap CLI if you want to use their build cloud services, which is basically the same as Cordova's with some extra commands to upload to their cloud, etc.

I think there are some plugin like Splashscreen wich also have some minor changes (using <gap>for params into config.xml instead of <preference>). Again, if Hydration solves the problem for you, the changes are minor and you get a really nice feature.

Answer 5

I think there is no such solution is available, but you can do it by programmatic way.you can update your cardova app by fetching files from server and updating it.

Answer 6

Check out CodePush from Microsoft. Works with Cordova and React Native.

Appears to be very similar to the "live update" feature from Ionic Cloud.