Blank screen after splash screen (iOS)

Blank screen after splash screen (iOS)

by Romeo S -
Number of replies: 9

Hello everyone,

I carefully followed the instructions outlined here to build my customized Moodle mobile app:
https://docs.moodle.org/dev/Setting_up_your_development_environment_for_Moodle_Mobile_2
https://docs.moodle.org/dev/Moodle_Mobile_custom_apps

After editing the config file and running gulp, I did a test with ionic serve where the app worked perfectly fine in the browser.  On Phonegap I am able to compile the app using my development key, however when I open the app on the iPhone, I only see a blank/white screen after the splash screen.  I re-compiled the app from scratch on Windows and Linux multiple times without success, so I am out of ideas.

During the build process I ran into the issue tracked below, updating to npm V4.2.0 solved the build issue:
https://tracker.moodle.org/projects/MOBILE/issues/MOBILE-1843?filter=allopenissues

Any ideas what could be causing the blank screen on the iPhone?  Thank you for your help!

Average of ratings: -
In reply to Romeo S

Re: Blank screen after splash screen (iOS)

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Romeo,

are you using a correct config.xml file for Phonegap build? Please, notice that the config.xml file for Phonegap build is different than the ionic one, you should always use the latest version of the plugin from here:

https://github.com/moodlehq/moodlemobile-phonegapbuild

You may also debug your app in iOS with the Safari tools: http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html

Average of ratings: -
In reply to Juan Leyva

Re: Blank screen after splash screen (iOS)

by Romeo S -

Hi Juan,

Thanks for your reply.

Yes, that's exactly the XML I am using.  I've adjusted the widged id, name and author.  I just did another rebuild but still the same issue.  I've hooked up my iPhone with web inspector enabled to Mac OSX and used the developer tools in Safari,  when using ionic serve the app loads fine on the iphone and safari, the console shows no errors.  I am starting to believe that something gets messed up during the Phonegap compilation process?


EDIT:  After logging in, I did get 3 Javascript errors in mm.bundle.js (see screenshot).  However, the app seems to work fine when testing it with ionic serve.

Attachment 08-02-2017 12-32-52.jpg
Average of ratings: -
In reply to Romeo S

Re: Blank screen after splash screen (iOS)

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Romeo,

but have you inspected the .ipa file created by Phonegap build?

You can inspect it  using Safari, please, be sure that before moving the code to the phonegap build directory you have run gulp.

We recently did some changes to the phonegap build config.xml file, please be sure that you are using the latest version that includes new cordova plugins.

Juan


Average of ratings: -
In reply to Juan Leyva

Re: Blank screen after splash screen (iOS)

by Romeo S -
Dear Juan,

Ah sorry, no only with ionic serve.  I will inspect the ipa file and will revert to you.

Regards,
Romeo

On 8 Feb 2017, at 13:34, Juan Leyva (via Moodle.org) <noreply@moodle.org> wrote:

Moodle in English » Forums » Moodle for mobile » Blank screen after splash screen (iOS)
Picture of Juan Leyva
Re: Blank screen after splash screen (iOS)
by Juan Leyva - Wednesday, February 8, 2017, 7:03 PM
 

Hi Romeo,

but have you inspected the .ipa file created by Phonegap build?

You can inspect it  using Safari, please, be sure that before moving the code to the phonegap build directory you have run gulp.

We recently did some changes to the phonegap build config.xml file, please be sure that you are using the latest version that includes new cordova plugins.

Juan


Show parent | Reply
See this post in context
Unsubscribe from this forum  Unsubscribe from this discussion  Change your forum digest preferences

You can reply to this via email.

Average of ratings: -
In reply to Juan Leyva

Re: Blank screen after splash screen (iOS)

by Romeo S -

Dear Juan,

I finally got around to debug the app using web inspector.  It seems that the blank screen is probably related to these errors:

Moodle app error message

The odd thing is that lib/chart.js/dist/Chart.js exists in my Github phonegap repo, so I am a bit puzzled why the file can't be found in the compiled app?

Thanks for your help!

Kind regards,
Romeo

Average of ratings: -
In reply to Romeo S

Re: Blank screen after splash screen (iOS)

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Romeo,

please run bower install or bower update, maybe is related to the Chart.js wrapper.

Juan

Average of ratings: -
In reply to Juan Leyva

Re: Blank screen after splash screen (iOS)

by Romeo S -

Hi Juan,

Thanks for your reply.  I ran bower update and it updated Chart.js to version 2.5, then re-compiled with Phonegap.  However, the errors are still there.  What I found very strange is that Chart.js seems to be missing in the app, even though it is there in my Github repo.

Attachment 24-02-2017 12-09-42.jpg
Average of ratings: -
In reply to Romeo S

Re: Blank screen after splash screen (iOS)

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi Romeo,

are you sure that is in the repository you use for building? I mean, we usually have two repositories: One with the ionic project and the other one with the contents of www/ just for Phonegap build

Regards, Juan

Average of ratings: Useful (1)
In reply to Juan Leyva

Re: Blank screen after splash screen (iOS)

by Romeo S -

Hi Juan,

Success!  I used the correct repository BUT it turned out that for some unknown reason the directory \lib\chart.js\dist was listed in .gitignore.  This created a big confusion, since the directory was on my local workstation but not in the actual Github repository, which I failed to notice.  That also explains why the app worked with ionic serve but not once compiled with Phonegap.  It works great now, thank you for your hints!

Have a nice weekend.

Kind regards,
Romeo

Average of ratings: -