1

I've got PWA functionality set up for my custom framework, and everything works great, except for the splash screen. The following requirements are all met:

  • The name property is set to the name of my PWA.
  • The background_color property is set to a valid CSS color value.
  • The icons array specifies an icon that is at least 512px by 512px.
  • The icon exists and is a PNG.

Unless I remove all other icons, the 512x512 icon will not be used for the splash screen.

The icon appears on Chrome Dev Tools Application section, so clearly it's seeing it.

Chrome Dev Tools

Below is my manifest.json, and a link to my testing site.

{
  "short_name": "New Site",
  "name": "New Site",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#17AAEC",
  "theme_color": "#17AAEC",
  "icons": [
    {
      "src": "assets/media/icon-pwa-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/media/icon-pwa-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/media/icon-pwa-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/media/icon-pwa-256x256.png",
      "type": "image/png",
      "sizes": "256x256"
    },
    {
      "src": "assets/media/icon-pwa-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

https://framework.jacob.rocks/

Update 2018-10-29

It turns out that the splash screen image is used when there is no service worker registered, but if a service worker is registered, then a smaller icon gets used. This appears to be a bug with Webkit as far as I can tell. See the GIFs below.

JacobTheDev
  • 17,318
  • 25
  • 95
  • 158
  • Could you please provide the logs? – abielita Sep 25 '18 at 17:01
  • What gives you the idea that the 512 image should be used? – abraham Sep 26 '18 at 00:50
  • @abielita I'm not sure what logs you're referring to, can you clarify? – JacobTheDev Sep 26 '18 at 12:34
  • @abraham Google's own documentation. https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen – JacobTheDev Sep 26 '18 at 12:35
  • 1
    @JacobTheDev That simply says you should have a 512 size. It never says anything about which size gets used when. – abraham Sep 28 '18 at 00:22
  • 1
    @abraham Okay, after re-reading it and finding some more resources, it sounds like it tries to pull the icon that's closest to 128dp for the phone you're viewing it on, which is most often either 192x192 or 512x512. From the wording on the splash screen documentation, it sounded like it always pulled the 512x512 for the splash screen, which is what threw me off. After a little more testing, I see it's pulling the 192x192, but it uses it for both the home icon and splash screen. I'd like to use different icons for each, but it seems that's not currently possible, but I swear it worked before. – JacobTheDev Sep 28 '18 at 15:37
  • Possible duplicate of [Can't get splash screen icon on Android Chrome PWA](https://stackoverflow.com/questions/53800285/cant-get-splash-screen-icon-on-android-chrome-pwa) – BruceM Dec 18 '18 at 04:26

2 Answers2

0

I had the same issue - it seems you not only need to get the px values right, but also the dp issues, which depend on the screen density and the dpi settings of the created image - see Jacque's excellent answer here: Can't get splash screen icon on Android Chrome PWA

BruceM
  • 1,549
  • 1
  • 18
  • 41
-2

If you don't specify only a 512px icon, The biggest icon isn't chosen... There are no true solutions at this moment to correct that. You can define only a 512px icon, it's not a problem.

Adrien
  • 914
  • 7
  • 9
  • A 512x512 icon is defined, it's just not reading it. Please read the question fully. – JacobTheDev Sep 26 '18 at 12:32
  • Ah, sorry, I misunderstood what you were saying. If I define *only* a 512x512 icon, then yes, it works, but I want to serve up a different icon for the splash screen than for adding to home. Sounds like that's not possible, which is unfortunate. I could've sworn this worked previously... – JacobTheDev Sep 28 '18 at 15:33