PWA - manifest attribute "display": "standalone" not working on Android

Question

I've noticed a really weird behaviour of my PWA. I can launch it in "standalone" mode on Windows, but when I'm trying to do the same on my Android device it's ignoring the "standalone" value and opens the url in Chrome (Android 7.0, Chrome-Android v62.x). It also doesn't work in Chrome-Android Beta v63.x (relating to this post what refers to a bug in chrome 62.x ). I've checked the manifest file with the Manifest Validator and Lighthouse. Both tools validated the file and don't show me any errors/problems. The "Add to Homescreen" dialog is shown directly (on every first launch) and I can add the PWA to my Homescreen. The service-worker works as expected and I don't have any problems running the app offline (on Windows and Android).

I'm testing on my Android device with a proxy on my notebook (just in case this could be relevant). I also tried different Android devices, but the same problem occurs.

Note: different PWAs work as expected, e.g. 2048 as PWA

Here is my manifest.json :

{
  "icons": [
    {
      "src": "assets/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image\/png"
    },
    {
      "src": "assets/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image\/png"
    },
    {
      "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-512x512.png",
      "sizes": "512x512",
      "type": "image\/png"
    }
  ],
  "short_name": "My short name",
  "name": "My not sooooo short name",
  "theme_color": "#337ab7",
  "start_url": "/index.html",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait"
}

The manifest file is linked in the header of my index.html with additional mobile:

<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#337ab7">
<link rel="manifest" href="manifest.json">

The web app is build with angular2 (angular-seeds), just in case someone faced similar problems..

Thanks for your time and comments!

UPDATE 1:

When I'm not using a proxy to access my PWA from my mobile device and instead accessing it via an opened port from my local network, the standalone feature works just fine (but service-worker registration fails..). I'm still not sure why this "bug" occurs with a proxy.

UPDATE 2:

My real question is, why is this happening? And the other one is, how can I really test the behaviour and feeling of my PWA on a real mobile device if all solutions I found have compromises? Concerning the development environment..

My ways of testing on an Android device:

• open a port of my notebook and access inside in my local network over the ip adress of my notebook (service worker are not working since not https and no localhost, but pwa starts in standalone mode -.-)
• set a proxy on the Android device to the ip of my notebook (service worker works, standalone mode fails)

Answer 1

I found a solution to test my PWA on any mobile device without any of the listed compromises. I'm using now ngrok what allows me to create a tunnel to my localhost to make it accessible via https from anywhere. Thereby, I can test on any smartphone, tablet or emulator. ngrok can be downloaded here and is very easy to setup. With a single command you can create the tunnel to a specific port (e.g. 8080):

ngrok http 8080

Nevertheless, I'm still not sure why the fullscreen option didn't work when setting a proxy to my android device.