How to open a native iOS app from a web app

30
votes

Summary I have an app with a correctly functioning URL scheme that I'd like to launch from a web app stored on the home screen, and the normal JavaScript redirect methods don't seem to work.

Details I'm trying to create an iOS web app, to be opened in full-screen mode from a link saved on the Home Screen. The web app needs to open a specific native app. I have already registered the url scheme for the native app, and verified that it works correctly - I can open the native app by typing the scheme directly into my Safari address bar, for instance. I can also open it from other applications using the +openURL: method of UIApplication. I would like to also open it with certain arguments from a native web app that can be added to the home screen.

What I'm trying to do is use JavaScript like so inside the native app:

window.location = "myapp://myparam";

When using this code inside the web app I get an alert saying:

"Cannot Open myWebAppName - myWebAppName could not be opened. The error was "This URL can't be shown".".

This same javascript when executed within Safari works correctly. I get the same result using window.location.replace("myapp://myparam").

The html for the web app is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Carl Veazey">
    <!-- Date: 2012-04-19 -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                window.location = "myapp://myparam";
            } else {
                document.write("please save this to your home screen");
        };} else {
                alert("Not iPhone!");
                document.location.href = 'please-open-from-an-iphone.html';
        };
    </script>
</body>
</html>

What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.

5
javascriptiosmobile-safari
can't you redirect to app store link? – ant
sorry, what do you mean exactly? like can I open the app store from my web app? edit: I can open the native maps app, for instance; I suspect that the scheme uses http is why this works. That won't work for my application unfortunately. – Carl Veazey
so typing myapp://myparam into the url bar works? – AJak
@c0mrade that wouldn't do much. He's trying to open the native application. Not open the app's page on iTunes. If the user was redirected to the App Store link, they would be further directed to the app's page in iTunes on the iDevice... it would not open the app itself. – citruspi
Hm, thought it was a param issue. Very odd, I've used window.location before hand with no problems. Have you tried window.open(myapp://myparam) – AJak

5 Answers

14
votes

Your code works if its in mobile safari but NOT if its from a bookmark on the iOS desktop. Never tried it that way before, but thats the issue. If i just set your JS to 

<script type="text/javascript" charset="utf-8"> 
window.location = "myapp://myparam";
</script>

It works in browser, but when bookmarked it fails. It might have to do something with how the url is loaded when its bookmarked since there is no chrome? My guess is that apple doesn't want booked mark pages to access local apps. Also, I've noticed that if I bookmark a locally hosted page, that works in mobile safari, I can't get it to load via bookmark. Its really odd....

Best recommendation I have for you is to make it 

<meta name="apple-mobile-web-app-capable" />

instead of 

<meta name="apple-mobile-web-app-capable" content="yes" />

This way it will be on the home screen, but will unfortunately load with the chrome. Thats the only solution I can think of.

8
votes

If you need to open an iOS application if it is installed and also want to preserve your page's functionality, the location.href = 'myapp://?params=...'; won't help since if myapp:// is not registered, the redirect leads user to unreachable destination.

The safest bet seems to be in using an iframe. The following code will open an iOS app if it is installed and will not cause a failure if it is not (though it may alert a user that the page could not be reached if the app is not installed):

var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame);

// the following is optional, just to avoid an unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
0
votes

Try like this: The index page

<html><head></head><body>
<?php
$app_url = urlencode('YourApp://profile/blabla');
$full_url = urlencode('http://yoursite.com/profile/bla');
?>   

<iframe src="receiver.php?mylink1=<?php echo $app_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>
<iframe src="receiver.php?mylink2=<?php echo $full_url;?>" width="1px" height="1px" scrolling="no" frameborder="0"></iframe>

</body>
</html>

the receiver.php page:

<?php if ($first == $_GET['mylink1'])) { ?>
   <script type="text/javascript">
   self.window.location = "<?php echo $first;?>"; 
   </script>

<?php } if ($second == $_GET['mylink2'])) { ?>
   <script type="text/javascript">
   window.parent.location.href = "<?php echo $second ;?>"; 
   //window.top.location.href=theLocation;
   //window.top.location.replace(theLocation);
   </script>
<?php } ?>
0
votes

To provide an update, iOS14 Beta7 doesn't appear to be opening any local apps via their registered x-callback URLs. 👎

-1
votes
<?php 
// Detect device type
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");

// Redirect if iPod/iPhone
if( $iPod || $iPhone ){
    header('Location:http://example.com');      
}
?>

The above will redirect the browser to the inputted URL (http://example.com/) if the device is an iPod or iPhone. Add the script to the top of your web app, make sure you save it as a .php file rather than .html.

Source: http://www.schiffner.com/programming-php-classes/php-mobile-device-detection/