Phonegap – automatically including correct cordova

I’m developing a phonegap app on both iOS and android and have my www directory version controlled with git. I know that my HTML file needs to include the correct Cordova.js file (depending on which platform I’m currently developing on).

It is a little annoying pulling changes to www on iOS when someone was working on android. It gives me the endless gap_poll alert.

  • How to upload an APK from Jenkins/Hudson to Play Store?
  • Enforcing coding style and being warning and lint-free across teams in Android Studio or git/github
  • What files should I add to SVN ignore in an Project using Android Studio
  • Implementing ActionBar-PulltoRefresh by Chris Banes, library errors etc
  • Can't import the volley library in eclipse
  • Gradle command line : failed to find target android-22
  • Simple solution is to remember to change the Cordova.js src so it points to the iOS version again. The problem with that is the other developers will need to keep changing their src if the latest commit was done on another platform.

    Is there a way to automatically detect which version of Cordova to include? That way it would work on any platform and we wouldn’t have to make tedious changes.

  • git log not chronologically ordered
  • Git error when pushing: Object from LD_PRELOAD cannot be preloaded
  • How do you combine two git repos?
  • Why is git not ignoring .dcu files?
  • Why does “git rebase” leave opposite sets of modifications in the stage and the working copy?
  • Two different Git repo in same directory
  • 6 Solutions collect form web for “Phonegap – automatically including correct cordova”

    I have the same setup with my shared HTML/JS as a Git sub-module. My index.html sits in the shared folder and includes the platform-specific JS files using a relative path.

    There are 3 Git projects – Android, iOS and Shared. Shared is added as a sub-module in Android and iOS.

    Folder structure

    www
    |-platform
        |-js/libs/cordova.js
    |-shared
        |-index.html
    

    And in index.html

    <script type="text/javascript" src="../platform/js/libs/cordova.js"></script>
    

    I use the same idea to include JS files for plugins which are also platform dependant.

    The following code works fine for me:

        function init() {
            if(isAndroid()){
                $("script").attr("src", "lib/android/cordova-1.7.0.js").appendTo("head");
            }else if(isiOS()){
                $("script").attr("src", "lib/ios/cordova-1.7.0.js").appendTo("head");
            }
    
             document.addEventListener("deviceready", onDeviceReady, false);
        }
    
        function isAndroid(){
            return navigator.userAgent.indexOf("Android") > 0;
        }
    
        function isiOS(){
            return ( navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("iPad") > 0 || navigator.userAgent.indexOf("iPod") > 0); 
        }
    
        function onDeviceReady(){
            console.log("device is ready");
        }
    

    You can check the full source code here

    You should only have your master WWW under source control, which shouldn’t contain any cordova files. These should be added by phonegap to your platform folder when you do a phonegap build. So your common index.html can have:

    <script type="text/javascript" src="cordova.js"></script>
    

    In your master WWW you wont have a cordova.js script, but you will do in your platform/android folder when you do a:

    phonegap build android
    

    If you do need to conditionally tweak the content in your platform/xyz folders Grunt.JS is a great option.

    In my case, I just created a zip file for the www folder without the cordova.js or cordova-1.7.0.js (or other version). I submitted that zip to the build process and it generates the right cordova.js file so that it works on iOs and Android.

    Tell me if it worked.

    @dhaval’s answer did not work for me in a Cordova application on iOS 7.1.1. Although the script tag was added to the header, the scripts would not actually load as I verified with Safari’s remote inspector.

    Instead, I added the following script, which I grabbed from another SA answer.

    function getScript(src, func) {
        var script = document.createElement('script');
        script.async = "async";
        script.src = src;
        if (func) {
           script.onload = func;
        }
        document.getElementsByTagName("head")[0].appendChild( script );
    }
    

    and then

    if ( navigator.userAgent.indexOf("iPhone") > 0 || navigator.userAgent.indexOf("iPad") > 0 || navigator.userAgent.indexOf("iPod") > 0) {
      getScript("js/cordova_ios.js");
    } else if (navigator.userAgent.indexOf("Android") > 0) {
      getScript("js/cordova_android.js");
    }
    
    document.addEventListener("deviceready", onDeviceReady, false);
    

    The above solution didn’t work for me. So i added this jquery solution:

        var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
    
    if (isAndroid)
    {
    var script = document.createElement('script');
    script.src = 'cordova/android/cordova.js';
     document.head.appendChild(script);
    }
    var IOS = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());
    if (IOS)
    {
     var script = document.createElement('script');
     script.src = 'cordova/ios/cordova.js';
     document.head.appendChild(script);
    }
    

    Same goes for other Phonegap platform, for windows phone just add /windows phone/ etc.

    And if you have plugins, which also can be different from platfrom to platform. Just add plugin folder and cordova_plugin.js to same folder.

    Git Baby is a git and github fan, let's start git clone.