CODEWITHSUNDEEP
javascriptiosweb-applicationsiphone-standalone-web-app
sunfish
sunfish

Reputation: 91

redirect iOS webApp user to Safari?

I am working on a website.

iPhone users have the ability to "Save To HomeScreen" my website. Doing this will place an icon in the iPhone's home screen so that the user can access my website as a WebApp (full screen mode, Safari view).

I am trying to redirect webApp users to normal Safari. I dont want users to view my website in webApp mode.

This is the code:

window.onload=function(){
    if (navigator.standalone) {
        console.log ('Running iOS webApp, lets send user to Safari');
        window.location.href = "http://www.urlToWebsite.com";
    } else {
        console.log ('Running in a normal browser');
    }
};

From what everyone posts online, links opened in iOS webApp "mode" redirect to Safari.

However, in this case, where I am 'clicking' the link using javascript, the redirect to Safari doesnt happen. Instead, the webApp reloads in place.

How can I redirect to Safari successfully?

Upvotes: 1

Views: 1717

Answers (1)

Tim Rideyourbike
Tim Rideyourbike

Reputation: 707

Seeing as you can only redirect back to Safari from a web app if a user clicks on a link, all you need to do is trigger a link click.

Here is the code for a basic page where you will be redirect back to Safari.

<!DOCTYPE html>
<html>
<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>iOS Web App Test</title>
</head>
<body>
<script>
    if (window.navigator.standalone == true) {
        document.write('You are viewing this website as an iOS web App');
        document.write('<a href="http://www.urlToWebsite.com/?a" id="redirect-link" style="display: none;">Safari Website</a>');
        document.getElementById("redirect-link").click();
    } else {
        document.write('You are viewing this website in Safari.');
    }
</script>
</body>
</html>

You will notice a "?a" added to the end of the redirect link, as this needed as a iOS web app will not redirect to the same page.

Upvotes: 3

Related Questions