fd-vue-webapp icon indicating copy to clipboard operation
fd-vue-webapp copied to clipboard

Add a splash screen

Open amenak77 opened this issue 5 years ago • 12 comments

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 avatar Aug 18 '18 10:08 amenak77

1_ocqkcahitwznxenc9chwiw

Something like this

amenak77 avatar Aug 18 '18 10:08 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 avatar Aug 18 '18 14:08 amenak77

Maybe this could end the game

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

amenak77 avatar Aug 23 '18 06:08 amenak77

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

rafmjr avatar Oct 02 '18 00:10 rafmjr

@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?

mcicolella avatar Oct 03 '18 14:10 mcicolella

@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 :yum:

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.

ubaldop avatar Oct 03 '18 15:10 ubaldop

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 avatar Oct 03 '18 18:10 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

amenak77 avatar Oct 04 '18 07:10 amenak77

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.

rafmjr avatar Oct 04 '18 12:10 rafmjr

scr_webap_ios

@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?

amenak77 avatar Oct 06 '18 15:10 amenak77

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:

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

screen shot 2018-10-06 at 7 40 03 pm

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.

rafmjr avatar Oct 06 '18 23:10 rafmjr

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

amenak77 avatar Oct 07 '18 05:10 amenak77