15 Replies Latest reply on Sep 19, 2016 1:23 AM by VectorP

    in android device my phonegap project shows blank white page


      in android device my phonegap project shows blank white page, while the page shows fine in ripple

        • 1. Re: in android device my phonegap project shows blank white page
          VectorP Level 4

          Most likely something is wrong in your whitelisting, if you are pulling source code and/or content from an external source.

          Without seeing your code, config and directory structure, everyone at this forum would only be guessing, though.

          • 5. Re: in android device my phonegap project shows blank white page
            VectorP Level 4


            So, are you pulling anything from a remote source in your index.html, like javascript libraries or content data?

            If so:

            - how did you whitelist the remote sources?

            - what do you have in your CSP?

            - if ajax requests are used: are you waiting for the deviceready event to fire before attempting any XHR?

            • 6. Re: in android device my phonegap project shows blank white page
              phonegapm50273974 Level 1

              Not clear regarding whitelisting of remote sources

              <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" /> is present in config.xml

              did not use CSP in index.html, as adding this makes page blank

              yes we are waiting for deviceready event to fire

              • 7. Re: in android device my phonegap project shows blank white page
                VectorP Level 4

                Not clear regarding whitelisting of remote sources

                What is not clear? Did you include the whitelist plugin 'cordova-plugin-whitelist'? If so, did you read and apply its documentation?


                did not use CSP in index.html, as adding this makes page blank

                Are you saying that the page appears perfectly well without CSP? If so, what is the problem, then?

                BTW: if CSP causes your page to appear blank, you should simply correct it, so the missing sources can be fetched and scripts can be run.


                You may want to post your config and index.html, so I can have a look.

                • 8. Re: in android device my phonegap project shows blank white page
                  phonegapm50273974 Level 1

                  Yes 'cordova-plugin-whitelist' is added, creating a phonegap project and running it, itself creates and includes the plugin, i have not read the documentation.


                  adding CSP when checking even in ripple, white page appears

                  • 9. Re: in android device my phonegap project shows blank white page
                    kerrishotts Adobe Employee

                    Please share some code and your config.xml (minus identifying/secret information). Also share any code you may have tried and then later removed so we know exactly what you have tried.


                    Also, connect your device to your computer, enable USB debugging, and then use Chrome's debugging (chrome://inspect). If there are any errors, they'll show up in the console. You can also use "adb logcat" to see what's happening on the device. Be sure to share any errors you get with us so we know what you are seeing.


                    You really need to read the documentation on everything you are using, including the whitelist plugin. You also need to read up on the CSP meta tag -- If your page breaks because of it, then you need to fix it, not remove it. Any attempt to break out of the rules specified by the CSP will be logged to your console, so it is usually obvious what's gone wrong.


                    Also note: ripple is not a perfect emulator of PhoneGap apps. Don't rely on Ripple's behavior to verify that your app works on a real device.

                    • 10. Re: in android device my phonegap project shows blank white page
                      phonegapm50273974 Level 1

                      I am really desperate to solve the issue, here is my config.xml and index.html





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

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

                          <name>Hello World</name>


                              Hello World sample application that responds to the deviceready event.


                          <author email="support@phonegap.com" href="http://phonegap.com">

                              PhoneGap Team


                          <content src="index.html" />

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

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

                          <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />

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

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

                          <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />

                          <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />

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

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

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

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

                          <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />

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

                          <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />

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

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

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

                          <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />

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

                          <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />

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

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

                          <icon src="icon.png" />

                          <platform name="android">

                              <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />

                              <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />

                              <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />

                              <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />

                              <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />

                              <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />

                              <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />

                              <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />

                              <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />

                              <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />

                              <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />

                              <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />

                              <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />

                              <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />

                              <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />

                              <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />

                              <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />

                              <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />


                          <platform name="ios">

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

                              <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114" />

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

                              <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80" />

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

                              <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100" />

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

                              <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120" />

                              <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180" />

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

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

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

                              <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152" />

                              <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />

                              <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58" />

                              <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />

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

                              <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />

                              <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />

                              <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />

                              <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />

                              <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />

                              <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />

                              <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />

                              <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" />

                              <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />


                          <platform name="wp8">

                              <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />

                              <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />

                              <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />


                          <platform name="windows">

                              <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />

                              <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />

                              <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />

                              <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />

                              <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />

                              <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />

                              <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />

                              <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />

                              <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />

                              <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />

                              <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />

                              <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />

                              <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />

                              <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />

                              <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />


                          <access origin="*" />

                          <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 name="ios">

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

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






                      and my index.html


                      <!DOCTYPE html>

                      <html ng-app="App">


                              <meta charset="utf-8" />

                              <meta name="format-detection" content="telephone=no" />

                              <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

                              <!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->

                              <!-- Include jQuery Mobile stylesheets -->

                              <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">

                              <!-- Include style css -->

                              <link rel="stylesheet" type="text/css" href="css/style.css">

                              <!-- Include Awesome fonts -->

                              <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

                              <!-- Include Responsive -->

                              <link rel="stylesheet" type="text/css" href="css/responsive.css">

                              <!-- Include the jQuery library -->

                              <script src="js/jquery.min.js"></script>

                              <!--<script src="js/jquery-1.11.3.min.js"></script>-->

                              <!-- Include the jQuery Mobile library -->

                              <script src="js/jquery.mobile-1.4.5.js"></script>

                              <script type="text/javascript" src="https://code.angularjs.org/1.2.9/angular.js"></script>

                              <script type="text/javascript" src="lib/angular-route.js"></script>




                              <!--<div class="app-body">

                                   <div ng-view></div>


                              <div ng-view></div>

                               <!--<script src="js/bootstrap.min.js"></script>-->

                              <!-- Libs -->

                              <!--<script type="text/javascript" src="phonegap.js"></script>-->






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



                              <!-- App -->

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

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

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

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

                              <script type="text/javascript">






                      Please help me with a solution..

                      • 11. Re: in android device my phonegap project shows blank white page
                        VectorP Level 4

                        Just as I guessed:wrong whitelisting.

                        You are pulling content from an external source, apparently through Angular Route, without allow-navigation rule set.


                        You could test if that's the problem area by removing the Angular scripts and adding some static content. The white screen should disappear, then.

                        • 12. Re: in android device my phonegap project shows blank white page
                          phonegapm50273974 Level 1

                          well removing angular script route sops working, so i have downloaded the js and linked it to my page, but the page still appears white.

                          What else can be done here, please help

                          • 13. Re: in android device my phonegap project shows blank white page
                            VectorP Level 4

                            - Did you test with static content?

                            - Did you correct the whitelisting?

                            • 14. Re: in android device my phonegap project shows blank white page
                              phonegapm50273974 Level 1

                              yes with static content its fine, bt what is correcting whitelisting?

                              • 15. Re: in android device my phonegap project shows blank white page
                                VectorP Level 4

                                If you are pulling content from a remote server, which is to be displayed in the webview directly, you need a proper 'allow-navigation' rule for that content, so it's whitelisted.

                                The whitelist plugin's documentation explains things nicely.