Hey all!
I’m new to Ionic and got a question regarding the splashscreen used for the browser-platform. I’m very confused on how to change the default background-color of the initial screen when the app is loading. I’m not sure how to change this to a simple whitescreen or the like. Right now I’ve managed to add a “splashscreen” which you can see is in the center of the screen (the white box is my splash.png).
What I don’t understand is how to change the color of the surrounding background, which is currently 70, 70, 70 (dark-gray).
Any insight on this would be appreciated!
This is a problem for me because people will use the app both in browser and mobile.
If you look at the docs for the Splashscreen plugin, you’ll see a list of platforms it works on. Desktop browsers aren’t included. You need separate code for a welcome message on the desktop.
I see. Do you know a simple way to modify the desktop version?
Not sure what you mean. It’s a very different user experience – mouse and keyboard, probably no touch screen. So you may not want a splash screen, and instead a different approach to say hello to the user.
Yea exactly. The problem for me is that this is a screen that appears while the app is loading, not something I want to have. If I could remove this screen I would, since my app hasn’t actually loaded. I’m not sure why cordova/ionic forces this screen to appear while the app is loading in desktop mode.
Would appreciate any help on how to remove this and make the website load “normally”.
What screen exactly are you talking about?
Can you provide a screenshot or better a link to the app?
How can we reproduce it?
How are you building your app?
What is your ionic info output?
If by “browser-platform”, you mean the cordova browser platform, one option would be simply not to use it at all, if you’re not relying on any other cordova plugins in the desktop version. Serving the contents of www with any old webserver works just fine.
1 Like
@Sujan12
The screenshot is provided in my first post, it’s when I inspect the screen for a brief moment before the full site loads.
Here’s a link to the app, work in progress. http://munchkintracker.com/
Now I use a similar background-color as the screen I’m talking about, but when you fire it up you will see a blank screen with RGB (70, 70, 70), this is the screen I want to avoid.
@rapropos
The command I use to distribute the app is “Ionic cordova build browser --prod --aot”, so yea, using cordova. What command could I use to build it without these plugins? Sorry, new to all of this, love Ionic this far though!
I think this varies depending on how your package.json is set up and what version of the CLI you have, but two you can try are ionic build and npm run ionic:build.
CLI 3.7 will allow ionic build, version before need npm run ionic:build.
Thanks a lot to both of you. I used Ionic build now and got a more slim version of the web-app to publish, without the screen I was talking about. So basically cordova can be said to be useless in scenarios like this? I guess most, if not all plugins from cordova are meant for mobile platforms?
Thanks again! Really appreciate your help with this 
1 Like
“Useless” is a bit harsh, but you should definitely evaluate if you need anything from Cordova (that works on the browser platform). There might be situations where using the browser platform makes sense, but you most probably are not in one of those.
Yea I see. Haven’t really grasped all of this yet, not sure when to use what etc, but getting there. Thanks for the explanation.
@Sujan12 is much more polite than I am, so I would concur with your general evaluation of “useless”,
check SplashScreenProxy.js file in plugins/splashscreen/src/browser/SplashScreenProxy.js
U can modify settings and splash screen height ,duration,background color etc.
Example:
var splashImageWidth = 170;
var splashImageHeight = 200;
var position = { x: 0, y: 0, width: splashImageWidth, height: splashImageHeight };
var localSplash; // the image to display
var localSplashImage;
//var bgColor = “#464646”;
//var imageSrc = ‘assets/image/logo.png’;
var splashScreenDelay = 3000; // in milliseconds
var showSplashScreen = false; // show splashcreen by default
2 Likes
