Detect if iOS is using webapp

Question

I was wondering if it's possible to detect if an iOS user is using the webapp, or just visiting the normal way with safari browser.

The reason I want to achieve is that on a iOS webapp when a user click on a link, he will get redirected to the Safari browser. So I'm using the following workaround to make him stay in the webapp(prevent the switching to safari browser).

$( document ).on("click",".nav ul li a",
        function( event ){

        // Stop the default behavior of the browser, which
        // is to change the URL of the page.
        event.preventDefault();

        // Manually change the location of the page to stay in
        // "Standalone" mode and change the URL at the same time.
        location.href = $( event.target ).attr( "href" );

        }
    );

But I want this workaround only to happen when the user is using the webapp, I want it to be conditional for webapp users. So not on the default safari browser.

Presignify

Answer 1

You have to detect this by using some javascript:

<script>
if (("standalone" in window.navigator) &&       // Check if "standalone" property exists
    window.navigator.standalone){               // Test if using standalone navigator

    // Web page is loaded via app mode (full-screen mode)
    // (window.navigator.standalone is TRUE if user accesses website via App Mode)

} else {

    // Web page is loaded via standard Safari mode
    // (window.navigator.standalone is FALSE if user accesses website in standard safari)
}
</script>
</head> 

Now the extra check "standalone" in window.navigator is needed because some browsers do not have the standalone property and you don't want your code to crash for those browsers.

Precedence

Nice and simple answer! I searched stackoverflow ofc but for some reason that topic didn't pop up. Not even when I entered the title of the my question... Thanks! – Presignify

And I will, just need to wait 3 more minutes ;) – Presignify

@koningdavid: Glad to help you out! – Precedence

in typescript use window.navigator['standalone'] – Mackenzie

Answer 2

iOS and Chrome WebApp behaves different, thats the reason i came to following:

isInWebAppiOS = (window.navigator.standalone == true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

Wunderlich

Be careful with window.matchMedia('(display-mode: standalone)').matches: it is also true in desktop Chrome popup windows. – Preengage