web app splash screen doesnt show

Wed Oct 16, 2013 1:23 pm

Thanks Ram,

I can watch the clip now.

Like I said I do not want to edit my page's HTML directly. Because once you edit you can not further edit your page drag'n'drop (it's not a 2-way editor). However, is index.html different in that sense since it has no visual editor like my own pages?

And removing the splash CSS class from body should be done in startScreen Page Show event handler?

Is this page and its role documented somewhere in Appery?

Thanks again and great to be part of an active community...
Benny

Wed Oct 16, 2013 1:38 pm

you just edit the index html file, its the first page that loads and all it does is immediately load the project, thats the white screen we get while it download the project, the following is all the index file has (before adding the CSS):
code
<meta http-equiv="REFRESH" content="0;url=startScreen.html">
/code

it has NOTHING to do with your appery JQM project... once you edit it you can keep on working on your project without any problems.

so, if the CSS part is in your index.html file you dont have to add the CSS remove code as you dont have it in your startScreen page but only in your index file.

BTW - you can add/remove CSS in realtime using JS but it wont do you any good as the code run AFTER the project has been loaded and the splash/white page is WHILE the is being loaded.
Cheers,
R.

Wed Oct 16, 2013 9:01 pm

Hey Ram,

Your explanation is clear. I did above, and I see the effect when testing from Appery IDE.

However!-

It's (still) a web app and thus on my phone (iPhone) I navigate to the app address (I published to ***.app.appery.io for testing). Then I save to Home Screen to have it accessible directly from the phone desktop like any other app.

In that case (.app.appery.io) the app redirects immediately to startScreen.html, so the splash never appears. And then startScreen loads with the infamous white b/g. And since scripts are loaded in the head tag (this is how Appery generates the markup), the b/g remains there for a lengthy period of time until the page renders.

I think that ideally the splash should somehow be coded into startScreen.html, and be there while the scripts are loading.

If you have a good idea how to do that, I would appreciate it if you shared it here. I will do the same of course if I come out with an idea. Or, if I'm otherwise wrong in analyzing the situation, I welcome your comments.

Thanks,
Benny

Wed Oct 16, 2013 9:21 pm

you're correct, i'm straggling with it myself... see this, i have a few thoughts on how to bypass this and i'll keep you posted if i'll make any progress!

Best,
R.

Sun Oct 20, 2013 7:50 pm

Hi Ram,

It's driving me crazy but I have not given up yet...

I drilled deeper and followed jQuery Mobile behavior (Appery is using JQM obviously). JQM is reading your HTML and altering the DOM to render with JQM attributes and classes. On doing this, JQM adds the class ui-mobile-rendering to the HTML tag. When rendering completes (or after 5 seconds whatever comes first), this class is removed.

You can add styling to this class in your app CSS file to try and cause the effect of splash screen. A simple test would be:
precode
.ui-mobile-rendering {
background: yellow;
}
/code/pre
Could you try this too and tell us if it works for you?

Thanks,
Benny

Mon Oct 21, 2013 10:30 pm

Hi Benny,

i try your solution and the yellow background is visible for a blink of an eye and the first page is done loading and visible for the user, meaning for the most part of the loading process the page was white...

said that, let me share you with my thoughts, i'm having other things that drives ME crazy so feel free to take it too from here if you feel up to it.

as i see it, the main problem is that for a web app, a quick user response is a must so most of the small/mid JQM projects are set to "Render all pages in one HTML file (jQuery Mobile multi-page template)" and in such way since all the project is cashed in your mobile it has better response however the cost of it is that we need to download ALL the project as a whole and that takes time until all is downloaded and ready... and on that same time we want the splash screen to be visible, so, if we to set the project as "Basic single page template" the first page will load quickly, and what it does is run a serious of the following code (as many pages that inside the app):

code
<a href="mainPage.html" data-prefetch></a>
<a href="FAQ.html" data-prefetch></a>
<a href="loginPage.html" data-prefetch></a>
/code

that way the splash will be visible all the time while data-prefetch run for each page that will be cashed locally for the user to keep our web app responsive as if it was a multi-page template.

IMHO the POC needed is to get the current state of the data-prefetch in such way that it will be translated to percentage.

if POC is viable, then, all is left to do is to show the first page (that should be cashed quick as it base on the "Basic single page template"), a timer that will query on the current state of the cash progress and update/refresh the progress bar for the user to know when that awesome app is ready for him.

thats just my two cents

Best,
R.

Fri Nov 01, 2013 2:36 pm

Dear Ram and Appery staff,

I have done more research here.

Just stressing that I am talking about a web app (in browser and saved to home screen), not a mobile app.

I think the app life cycle begins before there is any HTML. I built a basic simple app with one page, and styled the body tag with yellow b/g color to emulate splash screen. Still, the app b/g is white to begin with, and only later changes to my b/g color for a split second before the page (with the swatch) b/g takes over.

I try to prove it by adding a breakpoint inside jQuery code code (specifically the function DOMContentLoaded).

Can you shed more light on my theory or contradict it? Is there any way I can interfere with this white b/g, or plug in my code in any way before the HTML is loaded?

And would it be the same when the app is wrapped as a mobile app and distributed through app store rather than URL

Thanks, Benny

Fri Nov 01, 2013 6:09 pm

Hello! Please check this post http://www.html5rocks.com/en/tutorial.... If it won't help please clarify how did you do this "and styled the body tag with yellow b/g". Public app link would also help.

Sat Nov 02, 2013 6:40 pm

Thanks Maryna,

I think I came across this post long time ago....
I have to find the part that explains how and when the browser displays the markup. Are you saying that the browser first displays the canvas that later will contain the HTML, and this canvas is displayed with white b/g until the markup is loaded, and that's how the browser is programmed? In this case is there anything I can do to change it?

By styling body I simply mean that my css includes:

codebody { background: yellow; }/code

My app link is splash experiment. The app include an Ajax call to make it do something beyond just showing a blank page. This call is delayed by using setTimeout, and showing JQM loading element (customized) to emulate a splash screen.

Asking again: when I finally wrap if for app store, will assigning a splash screen to the mobile app eliminate the white b/g problem?

Benny

Mon Nov 04, 2013 8:18 am

Hello!
1) Before browser has to load many CSS files and load+execute many JS files. It takes time. While all these files aren't loaded/executed there is nothing shown on browser screen.
2) Regarding "body { background: yellow; } - while page is loading yellow background is shown for a moment. But ones browser in on (div) container - this container completely override background body. It happens too quickly so you might not see yellow background.
3) The one you have on in your app is not splash screen, it's customized "loader div". In your app it shows on page show event (when page is fully loaded). It just cover the page.
4) If you create .ipa file and implement splash screen as described here http://docs.phonegap.com/en/2.2.0/cor... it'll solve problem with splash screen (it would be real splash screen shown before app loading)