PWA manifest.json - "theme_color" and "background_color" not working, splash screen not showing on android device

Question

When I look at the manifest.js in Chrome DevTools I can see that the logo and colors are there. However, when I start the website from my homescreen on my android device, neither the background or theme color is loaded, nor my splash screen is shown. Any idea why?

Manifest.json:

{
  "short_name": "Example",
  "name": "Example",
  "icons": [
    {
      "src": "images/logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#a300c4",
  "background_color": "#c46a00"
}

Screenshot:

EDIT

I found the mistake. I was browsing the website via a remote device using the Chrome DevTools. Port-forwarding to localhost:3000 doesn't match the https requirement for the splash screen to get triggered.

Now the pwa starts in standalone mode, the colors and the splash screen are shown correctly.

However, the splash screen logo is not shown and I have no idea why. The path to the image is correct and the image exists with the correct filename and type.

Any suggestions?

Answer 1

"If you page already has a theme-color meta tag — for example <meta name="theme-color" content="#2196F3"> — then the page level configuration will be used instead of the value in the manifest."

from: https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color

Answer 2

Only thing I see wrong with this manifest is start URL. Change it to something like below

  "start_url": "/index.html",

or

  "start_url": "https://example.com/myapp/",

If this didn't help, please host your app in some public domain and share the URL.