Load Splash Screen from Webserver


I’m working on an Ionic 2 app (for Android and iOS). The goal is to sell the app to different companies, with a personalized theme for each. The problem I’m facing is : the user, in a back office, should be able to choose a splash screen for the app without making an update in the stores. On the first start, there is a default splash screen, and in background, the app would download the next splash screen (all different sizes), store them, and show them on the next start.

My question is : Is it possible to change the splash screen after downloading it ?

Bonus question : I’d like the user to change the color (header, tabs, …) from the back office. I’ve successfully done it on client side (by setting new colors in the variable.scss), but the user should be able to choose between hundreds of colors (with a color picker). The only solution I came with was to set multiple color variables in the .scss file, and get the name (“custom-danger”, …) from the server, but I’m not going to set hundreds of colors in that file… Is there any solution to this problem ?

I know these questions are a bit tricky, so thank you if you manage to give me answers :slight_smile:

Please guys, I need answers :frowning:

Changing the splash screen would be technically possible. You could load multiple splash screens, and modify the Cordova plugin to accept an argument so it looked for filenames other than the default filenames. But it seems to me as though it would add a lot of bloat to your app, since one splash screen requires multiple files. Modifying the Cordova plugin so it would run a splash screen you could download – could you get code like that approved by an app store? It seems like a security risk. I would suggest testing on iOS 10, because I’m not sure it would get past their CSP. You also might want to ask on a Cordova-specific forum. It seems like a very technical question, that isn’t just a question about programming.

Maybe I’m not understanding your dynamic CSS question, but couldn’t you just solve that by standard Angular binding? ngStyle and ngClass? I don’t see why that’s hard, but maybe I’m missing something.

Thank you for your answer !

About the Splash Screen plugin, yes, I’m afraid the modification of the plugin could make the app refused, for security reasons.

For the CSS problem, I was not very clear. I’d like to modify the color of Ionic components, like tabs :

 <ion-tabs color="{{theme.headerColor}}" tabsPlacement="top" selectedIndex="{{selectedPage}}">
	<ion-tab *ngFor="let page of pages" (ionSelect)="changeSelectedTab($event, page.index)" [root]="page.id" tabTitle="{{page.title}}"> 

the headerColor is, for now, something like “danger” or “primary”. That is something I can get from the web server. But, I don’t think I can set an hexa color on the ion-tabs tag, because Ionic creates children tags and set the color on the children elements with this color attribute. So it doesn’t work with Angular binding, am I right ?
Well, if it does, could you please give me an example ? I tried this solution (ngStyle) but it didn’t work…

I see what you’re saying. You could use [color] and autogenerate SASS variables that would match your color picker (like color_row5_column7). If there’s a way that avoids the SASS variables, I don’t know it.

Do you mean, define (or generate) all colors in the scss file ? Something like :

$colors: (
  primary:    #169bd5,
  secondary:  #32db64,
  danger:     #d8443c,
  light:      #e4e4e4,
  dark:       #222,
  someColor : #...,
  someOtherColor : #...

If it is what you’re suggesting, I don’t think it could match. Because the users should be able to choose the color in a lot of colors, so I’m afraid the generated css files would be very big, and it might make the app bigger and slower.

I couldn’t manage to set directly colors on Ionic components without SASS variables, because of all the elements generated. Even when wrapping these elements into custom ones. So I don’t think it is possible.

But if someone else has ideas about that, it would be great !

Anyway, thanks for you answers !