cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 Mobile Splash Screen

Former Member
0 Kudos

Hi,

Can anyone tell me the best way to provide a mobile splash screen in SAPUI5?

I have developed a demo Fiori style app and it works nicely on phone, tablet and desktop, but over 3G it is very very slow to load (initial load > 2.5MB it takes up to 60s). What I would like is for it to be much faster, but I am aware of the issues with that as pointed out in his and from the great comments by Andreas Kunz and others. So as an interim measure I would like to at least show the user a "Loading..." screen so they can see something is happening and may be more patient (one can only hope). Currently it looks like the app is hanging or has crashed and users tend to give up.

Can anyone point me in the right direction?

Thanks,
Simon

Accepted Solutions (1)

Accepted Solutions (1)

konstantin_anikeev
Active Contributor
0 Kudos

Hi Simon,

what about to preload a simple page with spinner.

And load UI5 asynchron after that.

I want to write a blog post for that.

But you can see an example on http://ui5.anikeev.eu

First only spinner is shown.

Then OpenUI5 is loaded asynchron.

Regards

Konstantin

Former Member
0 Kudos

Thanks Konstantin,

Yes, that is the behaviour I am looking for. I see you use spin.min.js is that something you developed? So that loads and runs and then you load application.js and don't call the load function until after the <body> has been processed.

Thank you.

Simon

konstantin_anikeev
Active Contributor
0 Kudos

Hi Simon,

as promised.

Regards

Konstantin

Answers (3)

Answers (3)

Former Member
0 Kudos
AndreasKunz
Advisor
Advisor
0 Kudos

Hi Simon,

well, first of all, it should not be required to load > 2.5 MB. Is gzip enabled for all relevant file types on your server? The POA app (https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/poa/index.html#) comes in at 764 kB (which is still too much, I know) and a third of this is the huge icon font, but this app should have about everything yours has.

Still, loading can be slow and indeed it makes sense to display a loading screen NOT using UI5 when it is supposed to bridge the time while UI5 is loading.

One option is to add some plain HTML and CSS to the page, displaying an image or animation. Inline image in CSS, or even better in index.html, or a CSS animation would be preferred to avoid extra requests.

However, the browser only starts rendering the <body> once it is done processing the <head>. So if you load UI5 normally in the head, it could be that still everything is loaded synchronously before the browser goes on parsing the body and finally displaying something.

The solution for this is the async preload mode, see https://openui5.hana.ondemand.com/docs/guide/Bootstrap.html

In this mode UI5 (well, at least the libraries) is loaded asynchronously, so the browser can continue parsing the document without waiting for UI5 to load and init. This will help you to see something much faster. The one thing you have to do in this mode: you cannot use UI5 right away in the head, obviously, but you have to register for the Core's "init" event:

sap.ui.getCore().attachInit(function() {

    // now your app can start using UI5

});

One could continue to optimize on top of this, e.g. also load the UI5 core asynchronously, but maybe the above already helps.

Regards

Andreas

Former Member
0 Kudos

Hi Andreas,

Thanks for your reply. Firstly regarding GZIP, I will need to look in to that, so I should be able to get the size down to ~750KB also. I assume that is easy to do on Tomcat (my local server) but not sure how/if I can do that when I deploy it to the Hana Cloud Platform (would you have any ideas?).

UPDATE: If anyone is interested you can find how to configure GZIP for your HCP app here:

Thanks for pointing out the async preload mode for the bootstrap - I will try it out too . Between yourself and Konstantin I think I have a workable solution. Thanks to you both!

BRgds,

Simon

AndreasKunz
Advisor
Advisor
0 Kudos

Ah, one obvious thing I forgot to mention...: when you are talking about iOS and web apps which are put to the home screen by users, then you can also make use of meta tags. Google for "apple-touch-startup-image"

Regards

Andreas

former_member184739
Contributor
0 Kudos

Hello Andreas,

Your suggestion to reduce load time was really helpful. However when i checked Purchaser order POA app, its showing usage of 2.4 MB and it takes 30 seconds to load approx.(sometimes 35s, 40s too) as shown below.

Thanks

Prabaharan

AndreasKunz
Advisor
Advisor
0 Kudos

Hi Prabaharan,

two things...:

1.) This example app is not fully optimized. It does not use async library loading and most important for high-latency connections: it does not bundle the needed modules in one file to reduce requests. This may be one reason for the slowness you experience.

The latency displayed for the single files in your screenshot is 200-700 milliseconds, even more than one second for the file cut at the top. Summing up these latencies explains most of the delay you measure, so an app bundled into only few files should be much faster.

2.) The displayed 2.4 MB confuse me a bit... the szes of the files visible in the network log look pretty much like the sizes I see, but even with newly deleted cache and all files being loaded from the server, Chrome shows "763 KB transferred" for me. Can you scroll up in the log to the second loaded file, "sap-ui-core.js"? It should say "114 KB" in black (that's the compressed, actual transferred size) and "395 KB" in grey (that's the uncompressed size).

When you sum up the black sizes, they should amount to 700-800 KB.

Regards

Andreas

former_member184739
Contributor
0 Kudos

Andeas,

Thanks for your valuable inputs...

1. Currently the POA app has 36 requests. Yes valid reason for delay as you mentioned.

    Can you give some tips to bundle the app with few files with a small example?

2. Also in Chrome for "sap-ui-core.js" file for me the Actual transferrred is "396 KB" and uncompressed size is "395 KB". Attached is the chrome version.

Thanks

Prabaharan

former_member184739
Contributor
0 Kudos

Andreas,

Could you please suggest and example that runs in "Async mode" and many files bundled in a single request? Why i am asking you this is , many developers will know the solution to minimize the runtime of UI5 apps. Also currently we are experimenting the pro's and con's of SAPUI5 vs Jquery. Apart from this runtime performance SAPUI is excellent with rich set of controls and dynamic nature to adapt various screens..

Thanks

Prabaharan

0 Kudos

Hi Andreas,

I am using data-sap-ui-preload="async" at the start of the application. It works fine. Then I found out setting URL parameter with ?sap-ui-debug=true

no longer works. In the console, I saw below message:

2014-10-02 18:03:57 Device API logging initialized - DEVICE

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. sap-ui-core.js:80

I tried version 1.22.4, 1.23.0, 1.24.1 even, 1.25.0-SNAPSHOT.

Thank you very much!

Best Regards,

Siyu

Former Member
0 Kudos

You made me curious. Our app is deployed by the front-end server without minifying or urglyfing the JavaScript files. What can be done to optimize applications?

ChandraMahajan
Active Contributor
0 Kudos

Hi Simon,

you can have look at demo example at sap.m Explored

I recreated it at http://jsbin.com/EYohuwa/6/edit

Regards,

Chandra

Former Member
0 Kudos

HI Chandra,

Thanks for this, however I don't really think it is what I am after exactly since it is still required to download the majority of the SAPUI5 JavaScript files (nearly 2.4MB in this case) before I can use the Busy Indicator... what I really need is something that will tell the user that something is happening before while all that JavaScript is being downloaded. Perhaps I can place something non-SAPUI5 in the index page before the SAPUI5 bootstrap...

Thanks,

Simon