Why isn't polling working with Intel App Framework and Cordova's InAppBrowser?

Question

In my app I use Cordova's InAppBrowser to open an external page. I attach a polling event to look for a localStorage entry. When the entry is 'seen' the InAppBrowser should close but that's not happening.

This is all in the Intel XDK by the way.

What does happen (refer to code below) is that the Game1.html (external page) does load and appear. When I click the button that fires the 'submit' function I do see the "Done!" alert from the Game.html page but I don't see the "Caught" alert from the event listener.

Update: I have noticed that when the remote page is loaded and displayed that there is a 'back' icon in the top left corner. I didn't expect this with the Cordova InAppBrowser. However, in the documentation for the device.showRemoteSiteExt (intel bridge api) it describes this icon. Is it possible window.show is getting overridden with device.showRemoteSiteExt?

The primary reason I'd like to use this method is to allow the Game1.html to generate data that gets stored to localCache. Then the polling process can pick up that data and relay it to the server.

Function in index.html:

function showGamesPage() {
    var win = window.open("http://localhost:53841/Game1.html", "_blank", "EnableViewPortScale=yes");
        win.addEventListener("loadstop", function() {
            win.executeScript({ code: "localStorage.setItem('name', '' );" });
            var loop = setInterval(function() {
                win.executeScript({ code: "localStorage.getItem( 'name' );"},
                    function(values) {
                        var name = values[0];
                        if (name) {
                            clearInterval(loop);
                            alert("Caught!");
                            win.close();
                        }
                    }
                );
            });
        });
    }

And here's the function that fires in Game1.html when I click a button:

function submit() {
    localStorage.setItem("name", "john");
    alert("Done!");
}

Anybody know why this might be? Is this just a hole in the XDK?

Thanks in advance.

Which version of Intel XDK are you using? There were some fixes related to inappbrowser and loadstop in the most recent version. — OldGeeksGuide, Apr 14 '14 at 17:30
I'm using version 0714 of the XDK which supports version 2.1 of the framework. I assume it's using 2.1 since I'm not specifying the framework version: It would appear that 2.1 is the latest. — John Yost, Apr 14 '14 at 17:43
I notice you're loading game1.html through a local url. is it part of your project? Or is it really a separate file from outside your xdk project? — OldGeeksGuide, Apr 14 '14 at 18:10
It's a separate file outside the project. This should explain why: http://stackoverflow.com/questions/22517341/offline-caching-with-intel-app-framework — John Yost, Apr 14 '14 at 18:20
One other question, does this problem show up when running on a mobile device, or just when using the XDK emulator, or both? — OldGeeksGuide, Apr 14 '14 at 21:49
It happens in both the xdk and on the phone. So it's less likely to be an issue with the xdk. — John Yost, Apr 14 '14 at 22:04

score 1 · Accepted Answer · answered Apr 19 '14 at 04:56

Your code worked perfectly on iPhone using Intel XDK App Preview, have you added <script src="cordova.js"></script> to the index.html.

However in the XDK emulator it does not work, localStorage.setItem() does not seem run in simulated inappbrowser.

But the same code on iPhone works, here is the code:

<!DOCTYPE html>
<html>
<head>
    <title>App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="cordova.js"></script>
    <script>
    function showGamesPage() {
        var win = window.open("https://c9.io/.../test.html", "_blank", "EnableViewPortScale=yes");
        win.addEventListener("loadstop", function() {
            win.executeScript({ code: "localStorage.setItem('name', '' );" });
            var loop = setInterval(function() {
                win.executeScript({ code: "localStorage.getItem( 'name' );"},
                    function(values) {
                        var name = values[0];
                        if (name) {
                            clearInterval(loop);
                            alert("Caught!");
                            win.close();
                        }
                    }
                );
            });
        });
    }
    </script>  
    <style>
body{background-color: white}    
    </style>    
</head>
<body>
<h1 onclick="showGamesPage()">Open</h1>
</body>
</html>

Thanks krisrak. I tested the same code on Android with the App Preview and it had the same behavior as the emulator. Thanks for testing it on iPhone. I don't have access to one. I think my next step will be to take this to the Intel framework developers to understand the Apple / Android delta. — John Yost, Apr 20 '14 at 02:34
which android version did you test? I work in the IntelXDK team — krisrak, Apr 20 '14 at 03:09
My phone runs version 4.3. I have a couple other Android devices around my house. I'll try those as they are ask different version and configurations — John Yost, Apr 20 '14 at 03:13
choose the build option "Cordova for Android" and add a file `intelxdk.config.js` with this: http://jsbin.com/cuzak/1/edit, and build, it works on Android, I tested with Nexus5, 4.4 — krisrak, Apr 20 '14 at 05:56
It works! Awesome! I was missing the right config. I had tried the config previously but I had the content wrong. The link to the correct config really helped. This was a real hurdle for me. Can't tell you how much I appreciate your help! — John Yost, Apr 21 '14 at 00:46

Why isn't polling working with Intel App Framework and Cordova's InAppBrowser?

1 Answers1