Phonegap only showing white screen

0
We are working again on the mobile part of our application. After installation on a iOS or Android device we only get a white screen after the splash screen. Going to the app through safari or chrome is no problem. All works as expected and showing the mobile version of our app. Anybody a clue on why this is happening and how to debug this? Regards, Ronald [Edit] Hmm, I think I must be doing something wrong. Added the following line to the index.html <script src="http://192.168.2.33:8080/target/target-script-min.js"></script> The IP address is the IP address of my local computer. Created a new build and renewed the app on the iphone. Then started the app but on the desktop going to http://localhost:8080/ is still giving me the standard weinre server page. Also tried the second method. Problem there is that google refuses to see the phone attached to the computer. Windows is seeing the phone and I can see the phone in my file explorer. Only chrome still says no device attached. [EDIT2] Here the error we are getting on mobile. Again when I just log in through the safari browser all is working as expected. Anybody a clue on how to fix this or investigate further? [EDIT3] To get rid of the first warning we added the following line to the index.html of phonegap <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * data:;" /> This one allows everything. We tried a lot of settings but the app would not start other then the setting above. If somebody has an answer on the best setting for the Mendix cloud chime in here. The config.xml should also be adjusted with the following lines: <allow-navigation href="http://yourappname.mendixcloud.com/*" /> <allow-navigation href="https://yourappname.mendixcloud.com/*" /> Should these lines not be autgenerated by Mendix? Phonegap 5 is out quite some time and it seems these lines are necesarry. Now the next error (bootstrap needs JQuery) comes from the clockpicker widget. I will raise an issue there but I am mistified why on mobile we get this error while it just works even on mobile when logging in.
asked
2 answers
2

Unfortunately the situation you're describing could have any number of causes. The easiest way to debug is to hook up an Android device to your pc with a USB cable and open chrome://inspect in a Chrome window. Your device should automatically show up as soon as you start your app. Selecting it will open a browser console. In most cases, you should be seeing an error pop up in the console as you're trying to connect.

Edit: the weinre tutorial above will also net you a debugger, but requires an install and editing your app, where the Chrome console works out of the box. The upside to weinre is that it will also work for non-Android devices.

Edit: Forgot that this will only work if you have debugging enabled on your phone, sorry. Apparently I take that for granted nowadays. Enabling debug mode can be done from the the developer menu of your Android phone. Simply tap the 'about' menu setting seven times in succession and you should be good to go. If you're having trouble there should be lots of tutorials on Google.

answered
0

Ronald,

If you can't see it on mobile, you might want to file a support request.

One thing I can think of is that you forgot to include a Phonegap package. Not sure, because you also state it works great on your mobile browsers.

EDIT: Dexx his method is correct. You can debug any Phonegap build with chrome://inspect. Looks like I have learned something new today :-). Below instructions might only be useful when you try to debug iPhone etc...

There are ways to do debugging, this requires some manual effort:

  • Here is a small introduction into weinre: https://world.mendix.com/display/howto6/Debug+a+Hybrid+Mobile+Application and https://people.apache.org/~pmuellr/weinre/docs/latest/
  • You can start weinre, go to the weinre debugger in your browser. Here it will say you have to include a script link in your html (You have to use the script link WITHOUT #anonymous or it won't work)
  • Copy the link and paste this into your index.html of your phonegap build (the zip-file you can download that is used by build.phonegap.com)
  • Build the new application and install this one on your phone. Make sure you phone is on the same network as your computer, as it tries to download the script I mentioned above
    • If you start your application, you will see a session pop up in Wienre. The console can be used to check for any errors.

That's the way I have debugged a couple of Phonegap builds lately and seems to work pretty good.

If you have debugged it, make sure you remove the script tag again before creating another build / publishing your application. If you forget this (or your phone is not on the same network as your application) you will get a white screen anyway, as it fails to load a dependency

answered