Detect if iOS is using webapp

2019-03-24 18:00发布

问题:

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.

回答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
    ){

    // .... code here ....
}
</script>
</head> 

As can be found here: Determine if site is open as web app or through regular safari on ipad?

And the source used in the answer is THIS.



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