5

I'm trying to dynamically load the phonegap javascript file (so that I can choose not to load it in debug mode when I'm using Ripple) but I'm running in to some issues.

I load the jquery and jquerymobile javascript libraries using a normal script tag. In another script block, I do:

function onDeviceReady() { 
    alert("Device Ready!"); 
} 
$(document).ready(function() { 
    alert("doc ready!"); 
    $.getScript("js/phonegap.0.9.5.1.js", function() {alert("Got Phonegap!");}); 
    document.addEventListener("deviceready", onDeviceReady, false); 
});

This code alerts that it "Got Phonegap!" but never alerts "Device Ready". Using jsconsole.com, I can see that the PhoneGap javascript object exists. However, trying to call device.uuid (or other simple phonegap API calls) fails. It's almost like PhoneGap didn't fully initialize. Doesn't seem like that should be the case though. Am I missing something? Thanks!

Max
  • 1,218
  • 1
  • 12
  • 20
  • 1
    the addEventListener call should be in your callback with the alert – Joseph Marikle Jul 21 '11 at 21:56
  • @Joseph - I don't think that should make a difference... (tried it and it didn't) – Max Jul 25 '11 at 03:15
  • @Max have you found any solution, I am having the similar issue. I tried loading phonegap with Yabble, RequireJS, LABjs and with simple javascript but it does not work – dhaval Mar 05 '12 at 06:33

5 Answers5

8

Finally I got it working without using any external library.

THE PROBLEM
For a multiplatform Phonegap project, two are the parts that differ from one platform to another:

  • The encapsulating project
  • The Javacript Phonegap file.

Those encapsulating projects typically do not change much over the course of the project. It would be desirable to have a single HTML5 codebase that one could directly paste (or using build scripts) onto the platform-dependent projects. Since the javascript phonegap library is inside the set of web files, it's really painfull to replace the correct file each time.

MY SOLUTION
In my project I have several cordova files, one for each target platform:

  • cordova.android.js
  • cordova.ios.js
  • cordoba.bb.js ...

(Notice how every one of these files is included in the app even if it is not used. For me it's not a problem, since the scripts are bundled in the app and only the one for the correct platform is loaded to memory).

In my pages, instead of a script tag for phonegap, I placed the loader module:

<script src="phonegap-loader.js"></script>

And this would be the phonegap-loader.js script. I make use of user-agent detection to dynamically and synchronously load the script:

    (function(){
        var useragent = navigator.userAgent;


        if(/Android/i.test(useragent)){
            loadScript('cordova.android.js');
        } else if((/iPhone/i.test(useragent)) || (/iPad/i.test(useragent))){
            loadScript('cordova.ios.js');
        }
        ...
        // Else desktop browser is assumed and no phonegap js is loaded


        function loadScript(url){
            // synchronous load by @Sean Kinsey 
            // https://stackoverflow.com/a/2880147/813951
            var xhrObj =  new XMLHttpRequest();
            xhrObj.open('GET', url, false);
            xhrObj.send('');
            var se = document.createElement('script');
            se.text = xhrObj.responseText;
            document.getElementsByTagName('head')[0].appendChild(se);
        }
    })();

Its really important to load the script SYNCHRONOUSLY. This gave me innumerable headaches. Before realising this I tried adding scripts tags at the bottom of the head, and using $.getScript, but none worked, since ondeviceReady was not fired. Looks like the only valid approach to ensure the Phonegap script is executed when loaded dynamically is the one shown in this amazing answer by @Sean Kinsey (all kudos to him).

The only drawback is that the script is inlined, but for me is a cheap price to pay for having the core HTML5 app finally isolated from the containers.

Community
  • 1
  • 1
Mister Smith
  • 27,417
  • 21
  • 110
  • 193
  • 1
    this is actually a valid solution, to whoever use it , pay attention that loadScript should be function loadScript(url) { .. – Pavel 'PK' Kaminsky Feb 26 '14 at 17:09
  • How it come that I cannot load the js library on iOS [emulator 6.1]. it is working fine in android but in iOS there os no way. Am I missing something ? – dawez May 08 '14 at 14:51
  • 1
    @dawez Check the user agent sniffing part, the code I posted does not work for iPads for instance, but it is easy to modify. Just add another regex for `/iPad/`, and I think the `/Mobile/` regex check is not needed. – Mister Smith May 08 '14 at 15:46
  • I've modified the user agent sniffing part. Should now work fine with iPads and Android tablets, but obviously you'll need to add more platforms if you are using others (BB10, WP8, etc) – Mister Smith May 08 '14 at 15:51
  • @MisterSmith thx for the change. Is the script loading working for you also on iOS ? I posted my problem in this page: http://stackoverflow.com/questions/23546375 – dawez May 08 '14 at 15:54
  • @dawez the last app we made using this system was using cordova 2.x, and it worked fine. Never tried with 3.x yet, but I think it should work as well. – Mister Smith May 08 '14 at 15:58
  • THis works the first time I load my application. But after using location.reload() it doesn't work anymore?(device ready doesn't get fired) – DavidVdd Aug 05 '14 at 10:56
  • XHR is going to loose its synchronous support: "Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience." – Austin France Oct 13 '14 at 11:46
3

I was facing the similar issue where in which I need to load the PhoneGap and dependent plugin files based on the platform type. I went through the PhoneGap source and found that it uses the windows/browser events to load and prepare the objects. If I call the browser events manually then it initializes the PhoneGap objects (API and Plugins) I needed to run my application.

The following code which is using Yabble has worked for me now:

<html>
<head>
<script
    src="https://raw.github.com/jbrantly/yabble/master/lib/yabble.js"></script>

<script>
    require.setModuleRoot("js");
    require.useScriptTags();

    require.ensure([ "jquery", "phonegap" ], function(require) {

        // Trigger PhoneGap Initialization
        PhoneGap.onPhoneGapInit.fire();

        // Load PhoneGap Plugins
        require.ensure([ "plugin1" ], function() {
            $("#console").append("Plugin1 loaded<br>");
        });

        // Both following functions will work only if PhoneGap is loaded/initialized and Plugin is successfully registered

        // Check PhoneGap device object
        $("#checkDevice").click(function() {
            console.log(JSON.stringify(device));
        });

        // Call Native Plugin
        $("#callPlugin").click(function() {
            window.plugins.plugin1.call();
        });
    });
</script>
</head>
<body>
    <div id="console"></div>

    <input type="button" id="checkDevice" value="Check Device">
    <input type="button" id="callPlugin" value="Call Plugin">
</body>
</html>

Both Device info and Plugin calls is working fine on Android. Although I have not checked all the PhoneGap API but as of now I need only these two to work and they are working.

Edit

In Phonegap 1.5/Cordova, PhoneGap.onPhoneGapInit.fire(); is not available due to API change. In my current test most of the required objects are available without any change after loading the JS dynamically. Updated test is available at this gist - Cordova Lazy Load Test

dhaval
  • 7,611
  • 3
  • 29
  • 38
  • I have the same problem, and I can't find a solution not using require.js. Which is more: I'm puzzled about why is this happening. I have inspected the markup and the cordova scrip is there. Hence it must have been executed and initialized. But it didn't! – Mister Smith Jun 11 '13 at 15:03
0

1) have you tried calling addEventListener before getScript ?

2) also, do you use the correct phonegap.js for your device ? (when using iphone phonegap.js on android i had the same 'silent' behaviour)

jujule
  • 11,125
  • 3
  • 42
  • 63
  • I've tried adding the eventListener before the getScript (alert still isn't triggered and device still isn't defined) and I just re-copied the phonegap.js from Android. Still nothing... – Max Jul 23 '11 at 00:26
  • ever tried outside ripple ? i mean in a real usb plugged android device ? – jujule Jul 23 '11 at 20:00
  • all my tests have been on a "real" Droid Incredible device running 2.2. Tried shifting around the addEventListener call... but I really don't think that's the issue. What's most troubling is that the "device" variable is undefined. I don't know what that's about... – Max Jul 25 '11 at 03:28
0

The deviceready event is a special event handled by code in phonegap.js by duck punching document.addEventListener so phonegap.js has to be loaded before you can attach an event to deviceready.

Try this:

function onDeviceReady() { 
    alert("Device Ready!"); 
} 
$(document).ready(function() { 
    alert("doc ready!"); 
    $.getScript("js/phonegap.0.9.5.1.js", function() {
        alert("Got Phonegap!");
        document.addEventListener("deviceready", onDeviceReady, false);
    });
});
davejohnson
  • 1,447
  • 7
  • 10
  • thanks for the response! Unfortunately, I gave this a shot and the "Device Ready" alert still doesn't show up. Using jsconsole, I can see the PhoneGap object, but the "device" variable is undefined. I think I'm going to wait for the 1.0 release of PhoneGap on Friday and try again... – Max Jul 28 '11 at 04:44
0

I was able to simulate correct PhoneGap initialization workflow after injecting it dynamically by running the following javascript code right after injecting phonegap.js script. 

if (document.readyState == "complete") {

    PhoneGap.onDOMContentLoaded.fire();
}
Sergei Grebnov
  • 2,633
  • 18
  • 24