Add a splash screen

[amenak77]

When you run an app, there is, usually a splash screen in first place; the splash screen is quite standard: in 90% of cases there is a logo and a coloured background that unload itself after some seconds. Otherwise we have also an updated ver. Number. Personally I vote for white logo with green background

[amenak77]

Something like this

[amenak77]

There is a world of reasons about why a well done splash screen creates brand's strenght (first impression lasts above all); here there are some tips

https://medium.com/@daffodilsw/5-tips-to-design-splash-screen-for-mobile-apps-with-examples-a778b8595454

[amenak77]

Maybe this could end the game

https://github.com/andygup/splash-screen-js?files=1

[rafmjr]

I can start addressing this issue, if we're still interested in this featured, I can get hands-on!

[mcicolella]

@rafmjr @p3trur0 I tested the web app with BrowserStack on many iOS emulators but I can't see the splash screen.
Am I missing something?

[ubaldop]

@mcicolella AFAIK the splash screen should appear while the application resources are still downloading. Maybe the download is too fast to make the splash screen itself appearing 😋

Did you try to clean up the cache of your emulator?

About Android I confirm that through Chrome dev-tools I was able to see the Splash Screen manifest as provided by @rafmjr's PR.

[amenak77]

I don't use mac OS but my family has a lot of mac devices which I can use for testing: three smartphones, one tablet and one mac mini. I'll let you know ASAP

[amenak77]

I've updated and recompiled client's project and with android mobile gui I have same Mauro's priblem with iOS emulation: no splash screen! In ypur opinion, shoud have a splash screen not-mobile interface too? Maybe we shoud add a timer variable for a countdown before unloading the screen

[rafmjr]

Can you tell me which iOS version are you using to test the splash screen. In my case I used an iPhone 8+ running on iOS 11.4.1. in any case, since we're having problems, I will install xcode tonight and try myself other versions of the OS.

[amenak77]

@rafmjr Hi, excuse me for delay; I'm using IPhone 6+ and now I try on IPhone 5C; to be completely honest (and this doesn't lower the value of your contribution that's high and we all thanks you for this) I can't see either the splash sc. in Android mobile client or in IOS mobile. This is probably due to little loading times so that the image lasts only for fractions of seconds. What do you think about this?

[rafmjr]

Hello everyone, I'm very sorry for all the issues testing the pull request I submitted during the week. After doing a little more of research on my own, I learnt that there has been problems with the splash screens on Apple devices since they do not fully support PWA. You can read more here:

• Link 1
• Link 2

Anyways, I did some changes trying to improve compatibility and tested it using xcode emulating iOS 12 in an iPhone X.

You must also know that in order to see the splash, you need to add the website to the homepage of your device and then launching the website from there. Just like in an Android device. Meaning that going to the website directly from safari and entering the url wouldn't show the splashscreen.

I hope this helps and I'll be looking into the Service Worker.

[amenak77]

@rafmjr dont't worry! Your contribution, in particular about PWA, is top level. Thank you very much.