Ionic + PWA - problem with icon and splashscreen

Ionic Framework ionic-v3
1

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.

2

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.

3

This:

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

4

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.

5

It worked like a charm! Thanks for the help!

6

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

7

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>
    <platform name="browser">
        <preference name="SplashScreen" value="assets/img/loading_screen.svg" />
    </platform>