PWABuilder not recognizing display-mode

Question

I have used PWABuilder.com to make a iOS version of my PWA. The problem is that the Javascript from my PWA cannot successfully detect the display-mode.

I have this in my head:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

My manifest:

{
    "display": "standalone",
    "scope": "/",
    "start_url": "/bestellen",
    "name": "my app",
    "short_name": "my app",
    "background_color": "#ff5900",
    "icons": [
        {
            "src": "/assets/media/images/icons/app/app-big.png",
            "sizes": "512x512"
        },
        {
            "src": "/assets/media/images/icons/app/app.png",
            "sizes": "16x16"
        }
    ]
}

In XCode Settings.swift has this line:

let displayMode = "standalone" // standalone / fullscreen.

Javascript code:

        if (!window.matchMedia('(display-mode: standalone)').matches) {
            alert(1);
        } else {
            alert(0);
        }

Expected result: 0, actual result: 1.

How to fix this?

Answer 1

Use window.navigator.standalone instead of watchMedia.

        if (window.navigator.standalone == undefined || !window.navigator.standalone) {
            alert(1)
        } else {
            alert(0)
        }