9 Replies Latest reply on Jun 2, 2016 8:53 AM by kerrishotts

    I am seeing white screen when I am using phonegap ios ipa file from my iPhone

    yodgorbekk41568629

      I am seeing white screen when I am using phonegap ipa file from my iPhone.

        • 1. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
          kerrishotts Adobe Community Professional

          What kind of iPhone are you testing on? What OS version(s) have you tried your app on? Has the app worked anywhere else (and if so, on what devices)?

           

          How are you building your app? PhoneGap Build or generating using the cli (phonegap build ios)?

           

          The white screen you're seeing usually indicates an error in your startup code. This usually shows up on the JavaScript console, which you can see if you use GapDebug or use Safari's remote debugger. Startup errors are hard to catch though, so it might also be wise to put in some alert() statements so you know how far your code is getting before things go awry.

           

          Also, you should also look into a linter like eslint. These tools will check syntax for you and alert you to any errors that might otherwise prevent the code from working on the device.

          • 2. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
            yodgorbekk41568629 Level 1

            kerrishots, I am new for phonegap me and my friend are developing phonegap application he developing android and i am iOS . I am using iphone 5s and my version is 9.3.2 I am using phonegap build and I want to test app only.

            • 3. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
              kerrishotts Adobe Community Professional

              Can you post your config.xml, index.html, and JavaScript code where you start the app (probably in index.js)?

              • 5. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
                kerrishotts Adobe Community Professional

                When I think "white screen at launch", I think of a screen with absolutely nothing rendered on it (other than the status bar). You've got at least some content, so that's a start. The content you're seeing is coming from your "www" code -- probably in "index.html".

                 

                If you were expecting more, then my guess is some JavaScript is failing to execute, leaving your app in an unanticipated state. But to help with that, we'll need more information.

                 

                Can you share your index.html, index.js, and config.xml files so that we can help you further?

                • 6. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
                  yodgorbekk41568629 Level 1

                  config.xml

                   

                  <?xml version='1.0' encoding='utf-8'?>

                  <widget id="com.poovi.muniex" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

                      <name>Muniex</name>

                      <description>

                          Muniex

                      </description>

                      <author email="sivasangar005@gmail.com" href="http://poovi.org">

                          Shiva shankar

                      </author>

                      <content src="index.html" />

                      <preference name="permissions" value="none" />

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

                      <preference name="target-device" value="universal" />

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

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

                      <preference name="prerendered-icon" value="true" />

                      <preference name="stay-in-webview" value="false" />

                      <preference name="ios-statusbarstyle" value="black-opaque" />

                      <preference name="detect-data-types" value="true" />

                      <preference name="exit-on-suspend" value="false" />

                      <preference name="show-splash-screen-spinner" value="true" />

                      <preference name="auto-hide-splash-screen" value="true" />

                      <preference name="disable-cursor" value="false" />

                      <preference name="android-minSdkVersion" value="14" />

                      <preference name="android-installLocation" value="auto" />

                      <gap:plugin name="org.apache.cordova.battery-status" />

                      <gap:plugin name="org.apache.cordova.camera" />

                      <gap:plugin name="org.apache.cordova.media-capture" />

                      <gap:plugin name="org.apache.cordova.console" />

                      <gap:plugin name="org.apache.cordova.contacts" />

                      <gap:plugin name="org.apache.cordova.device" />

                      <gap:plugin name="org.apache.cordova.device-motion" />

                      <gap:plugin name="org.apache.cordova.device-orientation" />

                      <gap:plugin name="org.apache.cordova.dialogs" />

                      <gap:plugin name="org.apache.cordova.file" />

                      <gap:plugin name="org.apache.cordova.file-transfer" />

                      <gap:plugin name="org.apache.cordova.geolocation" />

                      <gap:plugin name="org.apache.cordova.globalization" />

                      <gap:plugin name="org.apache.cordova.inappbrowser" />

                      <gap:plugin name="org.apache.cordova.media" />

                      <gap:plugin name="org.apache.cordova.network-information" />

                      <gap:plugin name="org.apache.cordova.splashscreen" />

                      <gap:plugin name="org.apache.cordova.vibration" />

                      <icon src="icon.png" />

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

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

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

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

                      <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />

                      <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />

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

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

                      <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />

                      <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />

                      <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />

                      <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />

                      <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />

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

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

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

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

                      <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />

                      <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />

                      <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />

                      <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />

                      <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />

                      <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />

                      <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />

                      <access origin="*" />

                      <plugin name="cordova-plugin-whitelist" version="1" />

                      <allow-navigation href="http://*/*" />

                      <allow-intent href="http://*/*" />

                      <allow-intent href="https://*/*" />

                      <allow-intent href="tel:*" />

                      <allow-intent href="sms:*" />

                      <allow-intent href="mailto:*" />

                      <allow-intent href="geo:*" />

                      <platform name="android">

                          <allow-intent href="market:*" />

                      </platform>

                      <platform name="ios">

                          <allow-intent href="itms:*" />

                          <allow-intent href="itms-apps:*" />

                      </platform>

                      <engine name="android" spec="~4.1.1" />

                      <icon src="www/icon.png" />

                      <plugin name="cordova-plugin-camera" spec="~2.2.0" />

                  </widget>

                   

                  index.html

                   

                  <!DOCTYPE html>

                  <html lang="en" dir="ltr">

                  <head>

                    <title>Muniex - 01.Homepage</title>

                    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no; maximum-scale=1.0;" />

                    <meta name="apple-touch-fullscreen" content="YES" /> 

                    <link rel="stylesheet" type="text/css" href="css/muniexStyles.css" media="all" />

                          <script src="js/jquery1.9.min.js"></script>

                          <script src="js/angular1.3.js"></script>

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

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

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

                      <script type="text/javascript">

                          app.initialize();

                      </script>    

                  </head>

                  <body class="homeBg">

                    <img align="center" class="logo" src="images/muniex-logo-fff.png"/>

                    <div class="trans">

                    <div class="homeTxt">Where student <br />BUY - SELL - EXCHANGE <br />everything</div>

                    <a class="btn obtn continue-free" href="login-or-register.html">Continue-Its Free</a>

                    </div>   

                   

                   

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

                    <script type="text/javascript">

                    jQuery(document).ready(function(){

                    if(Userdata.user_id!=='')

                    {

                    window.location= "search-results.html";

                    }  

                    else

                    {

                    window.location= "index.html";

                    }   

                    });

                    </script>

                  </body>

                  </html>

                   

                  there is no index.js file

                  • 7. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
                    kerrishotts Adobe Community Professional

                    Your index.html file implies there are several .js files:

                     

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

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

                     

                     

                    Can you zip your project and post a link to it so I can take a look? Feel free to DM me instead if you'd rather not share it in public.

                    • 8. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
                      yodgorbekk41568629 Level 1

                      I send you code your Facebook profile check your other folder

                      • 9. Re: I am seeing white screen when I am using phonegap ios ipa file from my iPhone
                        kerrishotts Adobe Community Professional

                        So I've taken a look at your code, and the primary problem is the fact that you've got lots of extraneous stuff under "www" that doesn't appear to be needed. These folders have a file inside named "index.html", and I suspect this is confusing PGB as to which file is the correct file to use. Remove these folders and you should see what you expect to see.

                         

                        For reference, this is the *nix command I used to find the files:

                         

                        find . -name "*.html" -print0 |  xargs -0 grep TODO

                         

                        You have several other problems in your config.xml and app that I suspect will cause problems for you down the line. A few quick points there:

                         

                        1. Review the PhoneGap Build documentation, especially the docs for plugins and launch screens. You're using old-style syntax and old-style plugin IDs, which is going to make things difficult, so I suggest updating the syntax AND removing any plugins you don't need. Also be sure to pin the plugins to a specific version, otherwise PGB is apt to give you a newer version that your code isn't expecting.

                         

                        2. It looks like you're building a multi-page app. This is far from ideal, and is apt to only make your development life all the more difficult. Instead, read up on single page app architecture. This will probably require significant rewrites on your part, but the benefits are tremendous.