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.

Jean-Paul · Accepted Answer · 2020-11-08T09:05:18.950

30

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.

edited Nov 08 '20 at 09:05

answered Aug 01 '13 at 09:19

Jean-Paul

19,910
9
62
88

2

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! – koningdavid Aug 01 '13 at 09:21
1

And I will, just need to wait 3 more minutes ;) – koningdavid Aug 01 '13 at 09:23
@koningdavid: Glad to help you out! – Jean-Paul Aug 01 '13 at 09:24
in typescript use window.navigator['standalone'] – Fabiano Albernaz Feb 06 '20 at 00:15

score 15 · Answer 2 · answered Dec 02 '16 at 12:30

15

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);

answered Dec 02 '16 at 12:30

Javan R.

2,011
1
19
16

4

Be careful with `window.matchMedia('(display-mode: standalone)').matches`: it is also `true` in desktop Chrome popup windows. – Antelle May 16 '17 at 19:22

Detect if iOS is using webapp

2 Answers2

Linked