Phonegap - automatically including correct cordova

Question

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.

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.

"I know that my HTML file needs to include the correct Cordova.js file (depending on which platform I'm currently developing on)." : does this mean Cordova.js is different for different platforms? I don't get the cross-platform-ness then. I always thought the Cordova.js will be the same across platforms. Could you please clarify this to me? Thanks! — Ravindranath Akila, Aug 18 '13 at 05:33
Found the answer. It need not be different now: http://stackoverflow.com/questions/10810568/why-do-you-need-2-javascript-files-for-cross-platform-cordova-plugin — Ravindranath Akila, Aug 18 '13 at 05:35

score 25 · Answer 1 · answered Jun 07 '12 at 05:47

25

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

answered Jun 07 '12 at 05:47

dhaval

7,611
3
29
38

6

small fix for your solution that worked for me with jQ 1.3.0 `$('head').append(' – Roman K Mar 19 '13 at 08:03
Tested. It worked fine on jquerymobile 1.3.0. Kromit's comment was not correct. – Nguyen Minh Binh May 27 '13 at 04:37
@NguyenMinhBinh thanks, I am still using the above solution for set of my projects – dhaval May 27 '13 at 10:05

score 14 · Accepted Answer · answered Jun 07 '12 at 10:33

14

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.

answered Jun 07 '12 at 10:33

codemonkey

5,257
2
18
16

Extreme necro I know, but if you are still active, I wanted your opinion on http://stackoverflow.com/a/9003363/1520364 .It is your solution, but attempts to load a html file instead, would this help to load `cordova.js` and other platform specific changes nicely without the need to make them uniform like here? – Karthik T Jan 22 '14 at 15:30
I don't think that approach would work, but you could do something similar to the answer by @dhaval below to load files based on the platform. – codemonkey Jan 27 '14 at 14:35
This is a good answer, the cordova file is in the root folder of the www so you can do: `` – Chen Aug 05 '16 at 13:04

score 6 · Answer 3 · answered Feb 03 '14 at 23:10

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.

score 1 · Answer 4 · answered Jul 23 '12 at 13:34

1

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.

answered Jul 23 '12 at 13:34

Kiko Fernandez

857
10
26

Unfortunately I have been moved away from this project so I won't be able to test this. But thank you anyways! – Farzad A Aug 10 '12 at 15:49

score 1 · Answer 5 · edited May 23 '17 at 11:46

1

@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);

edited May 23 '17 at 11:46

Community

1
1

answered May 21 '14 at 08:48

Ted Avery

5,639
3
30
29

You don't really need to do it anymore, with phonegap 3 you just work on the root www folder and when you run the prepare, build or run commands, they copy the cordova ios to the www folder in platform/ios and the cordova android to platform/android, both as cordova.js so you just have to link the cordova.js on the head – jcesarmobile May 21 '14 at 10:32
1

@jcesarmobile My use case is that I am using Cordova as a wrapper for content that is 100% loaded from a remote website which I redirect to upon launch. This means I must also serve `cordova.js` from a remote server, and in this case, its not automatically resolved to a local platform-specific cordova.js – Ted Avery May 21 '14 at 12:53
In that case, good luck with apple, they could reject or remove your app from the store. – jcesarmobile May 21 '14 at 13:41
@jcesarmobile It's an internal enterprise app ;) But yes, very good advice, Apple won't allow an app just entirely wrapping a website in the app store. – Ted Avery May 22 '14 at 00:02

Svenbjørn Kvilt Olsen · Answer 6 · 2014-07-15T15:55:52.650

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.

Phonegap - automatically including correct cordova

6 Answers6

Linked