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?

Did you figure out what the issue with the splash screen was? Having the same issue. — JacobTheDev, Sep 25 '18 at 01:53
It's been a long time, but I think it was just a stupid mistake made by me. The PNG Images had the wrong sizes. I thought I exported them as 512x512px but when a checked them, they were like 499x501 or something like that. — Apocabal, Dec 06 '18 at 00:14

score 17 · Answer 1 · answered Jul 19 '19 at 14:35

17

"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

answered Jul 19 '19 at 14:35

Crozeta

917
10
11

2

I'm in the process of converting an Angular application to a PWA. The Angular CLI adds the `` tag automatically, so this was the solution for me. I needed to update my manifest AND `index.html`. Thanks for sharing. – vitale232 Feb 11 '20 at 12:28

score 3 · Accepted Answer · answered Jun 06 '18 at 22:14

3

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.

answered Jun 06 '18 at 22:14

Anand

9,672
4
55
75

Thank you for your answer, the solution was indeed hosting the app on a live server instead of just browsing it via localhost. However, the splash screen image is still not shown. I edited my post accordingly. – Apocabal Jun 13 '18 at 12:56

score -1 · Answer 3 · edited Feb 10 '22 at 23:05

-1

Change the following:

"background_color": "#c46a00" and "background-color": "#ffffff"

edited Feb 10 '22 at 23:05

jsonderulo

1,241
1
12
18

answered Feb 03 '22 at 20:13

sergioriverafl

129
2
6

the underscored `background_color` is correct in this case since this is from a `browserconfig.xml` file, **not** an html style attribute such as `background-color` – theZ3r0CooL Jan 28 '23 at 04:33

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

3 Answers3