14 Replies Latest reply on Mar 7, 2016 9:05 AM by kerrishotts

    Empty WebView?

    valeriob14716925 Level 1

      In the last two days i compiled my app with build service and when i open it in real devices it show me a white empty screen.

       

      I tested in

      samsung galaxy S5 with Android 5.0

      LG Nexus 5 with Android 6.0.1

       

      Screenshot_2016-03-01-22-40-39.png

      How you can see in this screenshot the status bar is drawed but webview is total empty.

       

      Also I tested to build app without any plugin but nothings changed. So problem is not in plugins.

       

      I think the problem is on build service because when i load app with desktop app connected with developer app on my device it works good.

        • 1. Re: Empty WebView?
          Chris W. Griffith Adobe Community Professional

          My quick guess is that you probably use a hosted library (jQuery Mobile, Bootstrap, etc) to render your UI. The issue arises from the Content Security Policy. You do not have it configured correctly, so any remote asset will not load. Please see the PhoneGap Build Documentation on this.

           

          Since you switched from PhoneGap Build to PhoneGap, you also introduced using different config.xml files. Although very similar (and becoming more so), they are different and reside in different directories. Please stay with one solution for you app or you will have nothing be headaches.

           

          The reason your app mostly works in the Developer app, is that app has it's CSP set to allow everything. So when you content is loaded into it's shell, it can access the remote assets.

           

          Does that help?

           

          Chris

          • 2. Re: Empty WebView?
            valeriob14716925 Level 1

            Thanks Chris

             

            My app is an Ionic app entirely contained in "www" folder. I do some AJAX calls to retrieve data in JSON format.

             

            I have only one config.xml file with two follow line to configure whitelist plugin:

             

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

            <allow-navigation href="*" />

             

            How whitelist plugin doc says:

            By default, navigations only to file:// URLs, are allowed. To allow others URLs, you must add <allow-navigation> tags to your config.xml:


            What may be that it does not work?

            • 3. Re: Empty WebView?
              valeriob14716925 Level 1

              I also tested

               

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

              <allow-navigation href="*" />

               

                 <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:*" />

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

               

              but nothing changed

              • 4. Re: Empty WebView?
                kerrishotts Adobe Community Professional

                valeriob14716925,

                 

                Would you mind posting your index.html file? That might help us troubleshoot your issue.

                • 5. Re: Empty WebView?
                  valeriob14716925 Level 1

                  <!DOCTYPE html>

                  <html ng-app="app">

                  <head>

                    <meta charset="utf-8">

                    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

                    <title>Checkit</title>

                   

                     <!-- CSS -->
                     <link href="css/ionic.css" rel="stylesheet" grunt-export="true"/>

                    <link href="css/ionicons.min.css" rel="stylesheet" grunt-export="true"/>

                    <link href="css/animate.css" rel="stylesheet" grunt-export="true"/>

                    <link href="css/app.css" rel="stylesheet" grunt-export="true"/>

                   

                     <!-- Cordova -->
                     <script src="cordova.js"></script>

                   

                     <!-- Javascript -->
                    <!--script src="http://maps.googleapis.com/maps/api/js?key=xxxxxx&sensor=true"></script-->
                    <!--script src="js/gmap-spiderfy.min.js" grunt-export="true"></script-->
                     <script src="js/jquery.min.js" grunt-export="true"></script>

                    <script src="js/ionic.bundle.min.js" grunt-export="true"></script>

                    <script src="js/i18n/angular-locale_it-it.js" grunt-export="true"></script>

                    <script src="js/helper.js" grunt-export="true"></script>

                   

                     <!-- Angular Dependency -->
                     <script src="js/webStorage.js" grunt-export="true"></script>

                    <script src="js/remoteLogger.js" grunt-export="true"></script>

                    <script src="js/rest.js" grunt-export="true"></script>

                    <script src="js/pushNotificationService.js" grunt-export="true"></script>

                   

                     <!-- Modules -->
                     <script src="app.js" grunt-export="true"></script>

                    <script src="partial/tab.js" grunt-export="true"></script>

                    <script src="partial/login/login.js" grunt-export="true"></script>

                     <!--script src="partial/discovery/discovery.js" grunt-export="true"></script-->
                     <script src="partial/property/property.js" grunt-export="true"></script>

                    <script src="partial/profile/profile.js" grunt-export="true"></script>

                    <script src="partial/portfolio/portfolio.js" grunt-export="true"></script>

                    <script src="partial/account/account.js" grunt-export="true"></script>

                    <script src="partial/notification/notify.js" grunt-export="true"></script>

                  </head>

                   

                  <body ng-controller="StartCtrl">

                   

                  <ion-nav-bar class="bar-balanced">

                   

                    <ion-nav-back-button class="button-icon ion-android-arrow-back"></ion-nav-back-button>

                   

                    <ion-nav-buttons side="right">

                    <button class="button button-clear" ng-click="scan()" ng-hide="hideScan.hide">

                    <i class="icon ion-qr-scanner"></i>

                    </button>

                    </ion-nav-buttons>

                   

                  </ion-nav-bar>

                   

                  <ion-nav-view name="content"></ion-nav-view>

                   

                  </body>

                  </html>

                  • 6. Re: Empty WebView?
                    Chris W. Griffith Adobe Community Professional

                    A white screen like that in an Angular App, usually means something went sideways in Angular. Have you tried remote debugging the app to see what might have thrown the error?

                    • 7. Re: Empty WebView?
                      valeriob14716925 Level 1

                      I launched the app into browser and into developer app connected with desktop app and it works fine without any exception in console.

                       

                      After build it doesn't work.

                       

                      I tried with minified javascript code and NON-minified javascript code, but after build i always see a white screen.

                       

                      So I think that code is ok.

                       

                      kerrishotts

                      New Test:

                      I tried to intall .apk generated from build in Genymotion emulator with Android 5.0 and it works perfectly.

                       

                      Unfortunately it's impossible for me to start classic android emulator in my pc.

                       

                      So empty screen appear only in real devices!

                      • 8. Re: Empty WebView?
                        Chris W. Griffith Adobe Community Professional

                        That is good, but I still think it is a whitelist issue.  Have to read this Remote Debugging Devices | Web Tools - Google Developers ? What you to get to is seeing the console log to find the error.

                        • 9. Re: Empty WebView?
                          valeriob14716925 Level 1

                          Thanks Chris

                          I tried using the debug of PhoneGap Build with "weinre" and only this message appears repeatedly in console:


                          No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.


                          so i added this line in header section of my index.html:


                          <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' http://*.phonegap.com 'unsafe-inline' 'unsafe-eval'">


                          But i see always white empty screen and nothing in console.


                          My application has many log instructions that do not appear in console. It seems that angular doesn't start.


                          It could be a CSP problem? How can i configure CSP meta tag in my index?

                           

                          Now my whitelist configuration in config.xml is:

                           

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

                          <allow-navigation href="*" />

                          <access origin="*" />

                          <allow-intent href="*" />

                          • 10. Re: Empty WebView?
                            kerrishotts Adobe Community Professional

                            Since you're building an Angular app, I suggest adding the ng-Csp directive (see AngularJS), like so:

                             

                            <html ng-app ng-csp>
                            

                             

                            I don't know if this will fix your issue, though.

                             

                            Now that you've added a CSP meta tag to your app, do you get any other errors logging to the console?

                            • 11. Re: Empty WebView?
                              valeriob14716925 Level 1

                              i injected ng-csp directive into html tag but in weinre i see always

                               

                              No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.


                              i'm going to ask in ionic support forum too.

                              • 12. Re: Empty WebView?
                                Chris W. Griffith Adobe Community Professional

                                And that is the only thing in the console, and you are still getting a white screen? Why not add a CSP to your index.html file?

                                 

                                GitHub - apache/cordova-plugin-whitelist: Mirror of Apache Cordova plugin whitelist

                                • 13. Re: Empty WebView?
                                  valeriob14716925 Level 1

                                  Hello guys! I found the problem that caused the empty white screen. It's simply an error on my code (null pointer) into an angular service.

                                   

                                  This mistake was really hard to find and I apologize for this very wrong support request.

                                   

                                  I am very grateful for their time and it is also thanks to your posts that I have reached the solution.

                                   

                                  Thanks again to all the PhoneGap team for your work.

                                  • 14. Re: Empty WebView?
                                    kerrishotts Adobe Community Professional

                                    No problem; glad you got it fixed.