Add a splash screen - Githubissues

freedomotic / fd-vue-webapp

A Vue.js web application for Freedomotic Open IoT framework

http://fd-vue-webapp.herokuapp.com/

GNU Affero General Public License v3.0

65 stars 66 forks source link

Add a splash screen #157

Open amenak77 opened 6 years ago

amenak77 commented 6 years ago

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 commented 6 years ago

1_ocqkcahitwznxenc9chwiw

Something like this

amenak77 commented 6 years ago

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 commented 6 years ago

Maybe this could end the game

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

rafmjr commented 6 years ago

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

mcicolella commented 6 years ago

@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 commented 6 years ago

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

amenak77 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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?

rafmjr commented 6 years ago

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.

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 commented 6 years ago

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