Why is my Angular PWA standalone display not working in Chrome on Android?

Question

I am currently working on an Angular PWA, but for some reason the display="standalone" setting doesn't seem to be working for Chrome on Android. My settings are the following:

index.html

<!-- Manifest /PWA -->
<link rel="manifest" href="manifest.json">
<meta name="msapplication-config" content="/assets/browserconfig.xml">
<link rel="shortcut icon" href="favicon.ico">

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#003865">

<meta name="apple-mobile-web-app-title" content="">
<meta name="application-name" content="">
<meta name="msapplication-TileColor" content="#003865">
<meta name="theme-color" content="#003865">

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-wep-app-capable" content="yes">

manifest.json

{
"name": "",
"short_name": "",
"description": "",
"icons": [{
  "src": "assets/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "assets/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "assets/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "assets/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  },
  {
    "src": "/assets/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/assets/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#003865",
  "theme_color": "#003865"
}

I just can't seem to find out why this is since everything does work as expected in Safari and Samsung Internet. Is there somebody who can help me figure out what the problem is?

Cheers!

Edit: I forgot to mention I already used the LightHouse tool in Chrome and it returned a 100% score for the PWA, so I imagine that can't be the problem.

There are no errors appearing in the console at all on a desktop browser, everything works except for this specific problem. — Rik, Nov 12 '18 at 15:05
are you able to see your manifest under application tab in chrome developers tool? — Rajat Badjatya, Nov 12 '18 at 15:07
is the size of your images actually matches with specified widths? — Rajat Badjatya, Nov 12 '18 at 15:36
Yes they do, everything is set up in the manifest as should be. Except the standalone feature just isn't working in Chrome on Android — Rik, Nov 12 '18 at 15:38
This is already done properly (It even is one of the requirements to be labeled a PWA by the LightHouse tool) — Rik, Nov 13 '18 at 14:04
Possible duplicate of [PWA deployed in node.js running in Standalone mode on Android and iOS](https://stackoverflow.com/questions/51677716/pwa-deployed-in-node-js-running-in-standalone-mode-on-android-and-ios) — abraham, Nov 17 '18 at 22:16

score 3 · Accepted Answer · answered Nov 14 '18 at 19:16

3

So I have been able to solve this by using this answer: https://stackoverflow.com/a/51706405/5798882

It seems that the default port of :443 needs to be used when deploying, otherwise the PWA won't open as a standalone display.

answered Nov 14 '18 at 19:16

Rik

342
2
6
18

score 0 · Answer 2 · answered Nov 12 '18 at 16:18

0

The manifest and tags which you have used seem right to me. I would suggest your can further give a try by doing the following things:

Adding one more 144*144 icons in your manifest.
Try to diagnose your issue by using "Audits" (lighthouse) available from the Chrome Dev Tools Audits tab.

Try to run the "Progressive Web App" mobile audit, the results should give you a clue for what you needs to fix.
If your are in proxy try to run the app outside the proxy env.

answered Nov 12 '18 at 16:18

Rajat Badjatya

760
6
13

Thank you for your response, I will try to add the icon. However, I forgot to mention I already used the LightHouse tool and it returned a 100% for PWA, so I imagine that can't be it. – Rik Nov 12 '18 at 16:27
I checked all three items of your list, but nothing seems to be the culprit. Do you by chance have any other options that might help? – Rik Nov 13 '18 at 10:59

Why is my Angular PWA standalone display not working in Chrome on Android?

2 Answers2