4 Replies Latest reply on Sep 19, 2016 4:20 PM by markv14999810

    Phonegap Build InappBrowser - What am I doing wrong?

    markv14999810 Level 1

      I've been wrestling with making calls to cordova plugins from within my app. Basically, I'm using phonegap as a wrapper to load up a CMS site. This question has lots of sub-questions, so please excuse me if I take a wandering approach.

       

      I had planned on originally using Inappbrowser - but now I'd like to support downloads (which it seems that Inappbrowser does not allow).

      Can I load up my external site in an Iframe? It looks like Iframes are frowned upon due to compatibility.

      If I try to load my external site through an Iframe, I get a blank frame - which suggests that something is wrong with my whitelist.

      Here is the index.html. I'm using inappbrowser here (with location set to no).

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml" >

      <head>

          <title>Emerald Test App</title>

          <meta name="apple-mobile-web-app-capable" content="yes" />

          <meta name="viewport" content="width=device-width" />

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

      </head>

       

       

      <script type='text/javascript'>

       

          iabRef = window.open('https://my-sites-url.com/content.aspx?page_id=31', '_self', 'location=no');

          iabRef.addEventListener('loadstart', iabLoadStart);

          iabRef.addEventListener('loadstop', iabLoadStop);

          iabRef.addEventListener('loaderror', iabLoadError);

          iabRef.addEventListener('exit', iabClose);

        

      </script>

      <body>

       

      </body>

       

      </html>

       

      Here's my Config

      <?xml version="1.0" encoding="UTF-8" ?>

      <widget xmlns   = "http://www.w3.org/ns/widgets"

          xmlns:gap   = "http://phonegap.com/ns/1.0"

          id          = "com.my-site-url.testapp"

          versionCode = "5"

          version     = "1.0.4" >

       

        <name>Test App</name>

       

        <description>

          An app designed especially for your organization

        </description>

       

        <author href="https://www.my-site-url.com" email="support@clubexpress.com">

          My App

        </author>

       

        <gap:platform name="ios" />

        <gap:platform name="android" />

        <gap:platform name="winphone" />

        <preference name="orientation" value="default" />

        <preference name="phonegap-version" value="cli-6.3.0" />

        <preference name="fullscreen" value="false" />

        <preference name="loadUrlTimeoutValue" value="700000" />

        <preference name="LoadingDialog" value="Please wait, the app is loading"/>

        <preference name="AllowInlineMediaPlayback" value="true"/>

        <preference name="SplashScreenDelay" value="7000"/>

       

        <preference name="KeepRunning" value="true"/>

       

        <icon src="res/icon/android-icon-36x36.png" gap:platform="android" gap:qualifier="ldpi" />

        <icon src="res/icon/android-icon-48x48.png" gap:platform="android" gap:qualifier="mdpi" />

        <icon src="res/icon/android-icon-72x72.png" gap:platform="android" gap:qualifier="hdpi" />

        <icon src="res/icon/android-icon-96x96.png" gap:platform="android" gap:qualifier="xhdpi" />

        <icon src="res/icon/apple-icon-57x57.png" gap:platform="ios" width="57" height="57" />

        <icon src="res/icon/apple-icon-72x72.png" gap:platform="ios"  width="72" height="72" />

        <icon src="res/icon/apple-icon-76x76.png" gap:platform="ios" width="76" height="76" />

        <icon src="res/icon/apple-icon-114x114.png" gap:platform="ios" width="114" height="114" />

        <icon src="res/icon/apple-icon-144x144.png" gap:platform="ios" width="144" height="144" />

        <icon src="res/icon/apple-icon-120x120.png" gap:platform="ios" width="120" height="120" />

        <icon src="res/icon/apple-icon-152x152.png" gap:platform="ios" width="152" height="152" />

        <icon src="res/icon/android-icon-72x72.png" gap:platform="webos" />

        <icon src="res/icon/android-icon-48x48.png" gap:platform="winphone" />

        <icon src="res/icon/apple-icon-180x180.png" gap:platform="winphone"   gap:role="background" />

       

        <gap:splash src="res/screen/default.png" />

        <gap:splash src="res/screen/default.png"  gap:platform="android" gap:qualifier="port-ldpi" />

        <gap:splash src="res/screen/mdpi.png" gap:platform="android" gap:qualifier="port-mdpi" />

        <gap:splash src="res/screen/hdpi.png" gap:platform="android" gap:qualifier="port-hdpi" />

        <gap:splash src="res/screen/xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi" />

        <gap:splash src="res/screen/xxhdpi.png" gap:platform="android" gap:qualifier="port-xxhdpi" />

        <gap:splash src="res/screen/xxxhdpi.png" gap:platform="android" gap:qualifier="port-xxxhdpi" />

        <gap:splash src="res/screen/default.png" gap:platform="ios"     width="320" height="480" />

        <gap:splash src="res/screen/640x960.png" gap:platform="ios"     width="640" height="960" />

        <gap:splash src="res/screen/640x1136.png" gap:platform="ios"     width="640" height="1136" />

        <gap:splash src="res/screen/750x1334.png" gap:platform="ios"     width="750" height="1334" />

        <gap:splash src="res/screen/768x1024.png" gap:platform="ios"     width="768" height="1024" />

        <gap:splash src="res/screen/1242x2208.png"  gap:platform="ios"     width="1242" height="2208" />

        <gap:splash src="res/screen/default.png" gap:platform="winphone" />

       

       

       

        <gap:plugin name="cordova-plugin-camera" spec="0.3.6" source="npm" />

        <gap:plugin name="cordova-plugin-media-capture" spec="1.0.1" source="npm" />

        <gap:plugin name="cordova-plugin-device" source="npm" />

        <gap:plugin name="cordova-plugin-device-orientation" source="npm" />

        <gap:plugin name="cordova-plugin-device-motion" source="npm" />

        <gap:plugin name="cordova-plugin-file" source="npm" />

        <gap:plugin name="cordova-plugin-file" source="npm" />

        <gap:plugin name="cordova-plugin-file-transfer" source="npm" />

        <gap:plugin name="cordova-plugin-media" spec="0.2.16" source="npm" />

        <gap:plugin name="cordova-plugin-inappbrowser"  source="npm" />

        <gap:plugin name="cordova-plugin-globalization"  source="npm"/>

        <gap:plugin name="cordova-plugin-dialogs" source="npm" />

        <gap:plugin name="cordova-plugin-vibration" spec="1.2.0" source="npm" />

        <gap:plugin name="cordova-plugin-whitelist" source="npm" />

      <allow-navigation href="*" />

      <allow-intent href="*" />

      <access origin="*" />

      <allow-navigation href="http://*.my-site-url.com" />

      </widget>

       

       

      If downloading and saving is not available through inappbrowser, how can I manage to save files from an external site (That I want to look like a native application)?

      On my external site, I've tried opening the files using things like

      window.open(url, '_system');

      And _blank, and adding 'location=no' etc, but no dice. Presumably because the pages open in the inappbrowser are sandboxed.

       

      So - is there any way to initiate a download from within an external web page in Inappbrowser using javascript?

      Is my only option to modify the onappbrowser plugin java file? Seems sketchy and examples only seem to support iOS.

       

      Should I use an Iframe? Any ideas why my Iframes would be blank using the above configuration? Am I doing something wrong?

       

      If you've read this far, thanks for reading!

        • 1. Re: Phonegap Build InappBrowser - What am I doing wrong?
          VectorP Level 4

          Several wrongs, here:

           

          1. You can't invoke the inappbrowser plugin with 'window.open()'. Instead, you should use the plugin's interface, e.g. cordova.InAppBrowser.open(). See the plugin's docs: cordova-plugin-inappbrowser

           

          2. Even if you did that correctly, it wouldn't work, because you are not waiting for the deviceready event to fire. Plugins will only be activated upon that event.

          See Events - Apache Cordova

           

          3. (not related:) In your config, you can remove the (2 occurrences of !!) the file plugin, as it is already integrated in the file transfer plugin. Also, you should refrain from using the gap: namespace, now.

          See Icons and Splash | PhoneGap Docs

           

          4. Please note, that the Stores will most likely reject apps that are merely website wrappers.

          Just curious: why would you do such a thing, if your users already have a better app to display your website (called: browser). The browser handles html/script better, offers more functionality (bookmarks, search) and is present, anyway. Serving as a website means you wouldn't have the trouble you're having now, and you wouldn't have to maintain and update your 'app'.

          See for instance: App Store Review Guidelines - Apple Developer

           

          5. Having said this: what do you mean with "support downloads"?

          Everything coming from a remote source is 'downloaded'. If you want to display external content (like a PDF document), you just create a hyperlink to that document and it will download and display. If you don't want it to display, why would you want it to be downloaded?

          If still required, this is usually done using ajax/XHR or the file transfer plugin. The latter will not be active for content inside the inappbrowser window.

           

          6. Your html code doesn't show what you defined for the iaB callback functions, like iabLoadStart, iabLoadStop.

          What should these functions do?

          • 2. Re: Phonegap Build InappBrowser - What am I doing wrong?
            markv14999810 Level 1

            Thanks for the education and taking the time. I've modified and fixed - I think the obvious errors, some of which were due to experimentation.

             

            In regards to #4, the application is intended to interface with a framework that relies heavily on session data and login. If I had an API for the framework (which I don't yet) - It would be much easier to natively code something and I wouldn't have this issue. What I ommitted before was some user agent and query string additions that identify a call from the app. The app is then presented as a 'native' looking experience with some special 'app only' features that are not available from the standard web browser.

             

            Two reasons why I'm not using a regular web browser.

            1) To determine that this is the 'app' and provide the special features

            2) The browser URL bar at the top detracts from a 'native' appearance.

             

            Before all this file-saving business, I have versions of these apps approved by the stores, so that shouldn't be a problem. In regards to #5, there are some files that I would like the user to transfer - but not necessarily display. Some odd types, like non-pdf documents (invoices, text files or other weird stuff that the user may store on the CMS) - or calendar reminders that the user can download and add to their device.

             

            Using the config and index below, I can use window.open('whatever.png','_system'); and the png will display full screen and I have to use the device back button to get back to the interface (or on iOS you're stuck and have to restart). Even if I could get these external links to open in a system default browser, that would be swell

             

            Recently, it's become important that I find a way to transfer files to the device (or in my earlier incorrect terminology "downloads"). I don't care about transferring to the framework - and only downloading or transferring to the device.


            Reading between the lines, it seems like ajax might work in my scenario. I just wanted to make it clear that the links and javascript to initiate the file transfer would be within my external site pages. Some real quick experiments clicking on links with ajax calls aren't too promising (nothing happens). I'll take some more notes and pass along results.

             

            Here are my edited index and config files. I removed my experimentation with the other inappbrowser callbacks.

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml" >

            <head>

                <title>Emerald Test App</title>

                <meta name="apple-mobile-web-app-capable" content="yes" />

                <meta name="viewport" content="width=device-width" />

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

            </head>

            <script type='text/javascript'>

            document.addEventListener("deviceready", onDeviceReady, false);

             

            function onDeviceReady() {

                var iabRef = cordova.InAppBrowser.open('https://whatever.my-cms-url.com/content.aspx?page_id=1&org_id=245449&app=1', '_self', 'location=no');

            }

             

            </script>

            <body>

            </body>

            </html>

             

            /--------------------------------------------/

             

            <?xml version="1.0" encoding="UTF-8" ?>

            <widget xmlns   = "http://www.w3.org/ns/widgets"

                xmlns:gap   = "http://phonegap.com/ns/1.0"

                id          = "com.my-cms-url.testapp"

                versionCode = "5"

                version     = "1.0.4" >

             

              <name>Test App</name>

             

              <description>

                Test App

              </description>

             

              <author href="https://www.my-cms-url.com" email="support@my-cms-url.com">

                ClubExpress

              </author>

             

              <platform name="ios" />

              <platform name="android" />

              <platform name="winphone" />

              <preference name="orientation" value="default" />

              <preference name="phonegap-version" value="cli-6.3.0" />

              <preference name="fullscreen" value="false" />

              <preference name="loadUrlTimeoutValue" value="700000" />

              <preference name="LoadingDialog" value="Please wait, the app is loading"/>

              <preference name="AllowInlineMediaPlayback" value="true"/>

              <preference name="SplashScreenDelay" value="7000"/>

              <preference name="AppendUserAgent" value="isapp" />

              <preference name="KeepRunning" value="true"/>

             

              <icon src="res/icon/android-icon-36x36.png" gap:platform="android" gap:qualifier="ldpi" />

              <icon src="res/icon/android-icon-48x48.png" gap:platform="android" gap:qualifier="mdpi" />

              <icon src="res/icon/android-icon-72x72.png" gap:platform="android" gap:qualifier="hdpi" />

              <icon src="res/icon/android-icon-96x96.png" gap:platform="android" gap:qualifier="xhdpi" />

              <icon src="res/icon/apple-icon-57x57.png" gap:platform="ios" width="57" height="57" />

              <icon src="res/icon/apple-icon-72x72.png" gap:platform="ios"  width="72" height="72" />

              <icon src="res/icon/apple-icon-76x76.png" gap:platform="ios" width="76" height="76" />

              <icon src="res/icon/apple-icon-114x114.png" gap:platform="ios" width="114" height="114" />

              <icon src="res/icon/apple-icon-144x144.png" gap:platform="ios" width="144" height="144" />

              <icon src="res/icon/apple-icon-120x120.png" gap:platform="ios" width="120" height="120" />

              <icon src="res/icon/apple-icon-152x152.png" gap:platform="ios" width="152" height="152" />

              <icon src="res/icon/android-icon-72x72.png" gap:platform="webos" />

              <icon src="res/icon/android-icon-48x48.png" gap:platform="winphone" />

              <icon src="res/icon/apple-icon-180x180.png" gap:platform="winphone"   gap:role="background" />

             

              <splash src="res/screen/default.png" />

              <splash src="res/screen/default.png"  gap:platform="android" gap:qualifier="port-ldpi" />

              <splash src="res/screen/mdpi.png" gap:platform="android" gap:qualifier="port-mdpi" />

              <splash src="res/screen/hdpi.png" gap:platform="android" gap:qualifier="port-hdpi" />

              <splash src="res/screen/xhdpi.png" gap:platform="android" gap:qualifier="port-xhdpi" />

              <splash src="res/screen/xxhdpi.png" gap:platform="android" gap:qualifier="port-xxhdpi" />

              <splash src="res/screen/xxxhdpi.png" gap:platform="android" gap:qualifier="port-xxxhdpi" />

              <splash src="res/screen/default.png" gap:platform="ios"     width="320" height="480" />

              <splash src="res/screen/640x960.png" gap:platform="ios"     width="640" height="960" />

              <splash src="res/screen/640x1136.png" gap:platform="ios"     width="640" height="1136" />

              <splash src="res/screen/750x1334.png" gap:platform="ios"     width="750" height="1334" />

              <splash src="res/screen/768x1024.png" gap:platform="ios"     width="768" height="1024" />

              <splash src="res/screen/1242x2208.png"  gap:platform="ios"     width="1242" height="2208" />

              <splash src="res/screen/default.png" gap:platform="winphone" />

             

              <plugin name="cordova-plugin-camera" spec="0.3.6" source="npm" />

              <plugin name="cordova-plugin-media-capture" spec="1.0.1" source="npm" />

              <plugin name="cordova-plugin-device" source="npm" />

              <plugin name="cordova-plugin-device-orientation" source="npm" />

              <plugin name="cordova-plugin-device-motion" source="npm" />

              <plugin name="cordova-plugin-file-transfer" source="npm" />

              <plugin name="cordova-plugin-media" spec="0.2.16" source="npm" />

              <plugin name="cordova-plugin-inappbrowser"  source="npm" />

              <plugin name="cordova-plugin-globalization"  source="npm"/>

              <plugin name="cordova-plugin-dialogs" source="npm" />

              <plugin name="cordova-plugin-splashscreen" source="npm" />

              <plugin name="cordova-plugin-vibration" spec="1.2.0" source="npm" />

              <plugin name="cordova-plugin-whitelist" source="npm" />

            <allow-navigation href="*" />

            <allow-intent href="*" />

            <access origin="*" />

            <allow-navigation href="http://*.my-site-url.com" />

            </widget>

            • 3. Re: Phonegap Build InappBrowser - What am I doing wrong?
              VectorP Level 4

              Using the config and index below, I can use window.open('whatever.png','_system'); and the png will display full screen and I have to use the device back button to get back to the interface (or on iOS you're stuck and have to restart).

              That's because window.open() is NOT part of the inappbrowser plugin's interface. So, you are not invoking the inappbrowser plugin and you are not getting the system browser to display it.

              Please read and apply the inappbrowser plugin's docs.

               

              To your html:

              it is invalid, because you have a script element between the head and body elements, which doesn't validate.

              The code might still "work", but the result is invalid and thus undefined/unpredictable.

               

              About your config:

              - you have a mix of gap: namespace syntax and newer syntax without gap: namespace. I would suggest you drop the gap: namespace altogether and use the new syntax, only.

              - you have specified both portrait and landscape, but landscape splashes are missing.

              - for some plugins (camera and media, for instance), you have pinned extremely ancient versions. Did you do that for a particular purpose?

              - <allow-navigation href="http://*.my-site-url.com" /> is redundant, since you already have <allow-navigation href="*" />

              • 4. Re: Phonegap Build InappBrowser - What am I doing wrong?
                markv14999810 Level 1

                Thanks for the help. It's very much appreciated.
                I might have to rethink or come back to this later. I'll mark your answer as correct. I'm pretty sure this all isn't going to work out and I'll have to rethink things.

                 

                I've made some changes to my index, and the way I'm loading the plugin.

                I'm successfully loading the inappbrowser and loading my external site.

                Doing something like this: var ref = cordova.InAppBrowser.open(url, target, options);

                 

                Inside the pages of my external site (pages that are not in the package and hosted somewhere remotely), I'm unable to get a handle to ref or cordova.InAppBrowser.  I was attempting to make these calls on the remote site. Null values or reference error.  Im assuming I need to make some listeners or onclick events in the script at the index.html level. Check the url, and reference the inappbrowser here instead of on the remote pages.

                 

                Not sure if that makes sense, but I'm starting to confuse myself.