Why is my Angular PWA not opening in a standalone display in Chrome on Android

[Rik]

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

manifest.json

{
  "name": "",
  "short_name": "",
  "description": "",
  "icons": [ {
      "src": "/assets/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/assets/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/assets/android-chrome-384x384.png",
      "sizes": "384x384",
      "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? 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.

Cheers!

[Sander Elias]

check the version of chrome in your kiosk thingie.

Regards

Sander

[Rik]

The version of Chrome is 70.0.3538.80

[Sander Elias]

Ok, then that's not the issue.

did you check it's cache and stuff, flushed out everything, including old service workers?

[Rik]

Yes I did, I removed the cache from Chrome, I deleted the app data from Chrome, I even downgraded Chrome to see whether that would make a difference. 

[Sander Elias]

Did you go in the "application" app and removed old SW's?

[Rik]

I'm guessing you mean the application tab on Chrome desktop? My problem is specifically with Chrome on Android, there I did delete all site data for the PWA but there is no specific place to delete old SW's.

[Sander Elias]

Hmm, I need to check that out as it is probably the issue. I will talk to an android expert later on.. (the perks of being on Chrome Dev Summit :) )

[Rik]

That would be great! I hope to hear from you again :)

[Rik]

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.

[Sander Elias]

Hi Rik, 

Glad you found it! 

Thanks for sharing. I was asking around yesterday and had a couple of ideas to share with you, but none of them where this!

Regards

Sander