Ionic + PWA - problem with icon and splashscreen

I have an Ionic 2 app and Iḿ trying to serve it as a PWA too. I’m facing some problems with the resources (icon and splash screen).
I build the pwa:

ionic platform add browser
ionic build browser

The browser/ folder is generated inside platforms/
When I access the platforms/browser/www/ file, the app loads, but the splashscreen won’t load (the browser output the error)

GET http://mydomain/screen 404 (Not Found)

Is it possible to change this before the build step, changing some parameters? I know I can change this in the output config files, but then everytime I regenerate the platform those settings will be override.


What do have listed as the path in your manifest.json file? Wouldn’t that be where the splash screen is defined for the PWA? I don’t think the ionic scripts adjust that file at this time.


<preference name="SplashScreen" value="screen" />

I have changed it manually, with some valid path in the value. Something like:

<preference name="SplashScreen" value="assets/fixedsplash.png"/>

and now it works. But weverytime I regenerate the build (ionic build browser), the config.xml is overwritten with the default values.
And I can’t change this prerence in the config.xml from the root, because it breaks the splashscreen in the build for Android and iOS.

1 Like

Try wrapping anything you need to adjust for the browser platform in a platform tag.

Here are the sample from the plugin docs:

<platform name="browser"> <preference name="SplashScreen" value="images/browser/splashscreen.jpg" /> <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" --> <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" --> <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" --> <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" --> <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" --> </platform>

Also, are you editing the config.xml file that is within the platform>browser directory? Anything in that directory will be overwritten.


It worked like a charm! Thanks for the help!

I had the overwriting problem. It happens when using --livereload. Just control c to kill it. Then save the file.

I had a similar problem. I solved it by setting the SplashScreen preference for every platform:

<platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
        <preference name="SplashScreen" value="screen" />
    <platform name="browser">
        <preference name="SplashScreen" value="assets/img/loading_screen.svg" />