30

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.

Carl Veazey
  • 18,392
  • 8
  • 66
  • 81
  • can't you redirect to app store link? – ant Apr 19 '12 at 21:28
  • 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 Apr 19 '12 at 21:32
  • 1
    so typing myapp://myparam into the url bar works? – AJak Apr 19 '12 at 22:07
  • @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 Apr 19 '12 at 22:17
  • 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 Apr 19 '12 at 22:25
  • This simple HTML file open the app if it exists, otherwise open the store URL. It works for Android and iOS. https://gist.github.com/noelrocha/e423ff9ec98011e10ef7 – Noel Rocha Mar 16 '15 at 18:31
  • Hi! I see many questions like these, but.. have you never needed to jump BACK to the web app? – Josef Habr Jan 30 '19 at 12:46

5 Answers5

14

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.

AJak
  • 3,863
  • 1
  • 19
  • 28
  • Thanks, but how could I conditionally execute my javascript? I have that if statement that inspects the user agent in there because I want to have the same page behave differently when navigated to from Safari than from launched from the home screen. Do you know of a different way to check that? Thanks! – Carl Veazey Apr 20 '12 at 11:50
  • window.navigator.standalone is the only way I know of for doing that and it only works if content="yes" is enabled. Not sure if its possible to do what you want. I can see Apple deliberately not allowing for developers to make a home button that launches another app. Its a bit confusing, since they should just be clicking the app instead of a webpage that loads the app. – AJak Apr 20 '12 at 15:52
9

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);
Andrew Sklyarevsky
  • 2,095
  • 14
  • 17
0

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 } ?>
T.Todua
  • 53,146
  • 19
  • 236
  • 237
0

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

TheMiddle
  • 93
  • 8
-1
<?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/

Ryan Brodie
  • 6,554
  • 8
  • 40
  • 57
  • Sorry if I didn't make myself clear. I've already done that part - now I need to use javascript to open my app from a web app saved on the home screen. I think I will reword my question. – Carl Veazey Apr 19 '12 at 22:29
  • Pasting your JS / HTML would be helpful – AJak Apr 19 '12 at 22:33
  • It being a web app and it being saved on the home screen shouldn't make any difference, as long as the URL is formatted correctly your application should open? Or are you struggling to cause the redirect with JS? If so a simple JS `header.location="URL"` would suffice. I'm not sure if that what you're after though. – Ryan Brodie Apr 19 '12 at 22:38
  • Go to http://jsfiddle.net/W9Wp2/1/ on your mobile phone, use your specific string for the open, hit run, and see if it works. I have a feeling your JS/HTML is not correct. – AJak Apr 19 '12 at 22:47
  • @RyanBrodie yes I'm struggling to cause the redirect with JS. I'll try that. – Carl Veazey Apr 19 '12 at 23:07
  • @AJak I went to that site and after hitting run nothing happens. – Carl Veazey Apr 19 '12 at 23:07
  • @RyanBrodie just tried header.location = "myapp://myparam" in place of window.location, with no luck sadly. Thanks though! – Carl Veazey Apr 19 '12 at 23:10
  • @CarlVeazey - Apparently fiddle doesn't work in mobile safari my bad. – AJak Apr 19 '12 at 23:16
  • @RyanBrodie I have not. I'm honestly not sure how to do that - I'm quite inexperienced with web programming :/ – Carl Veazey Apr 20 '12 at 13:46
  • Updated answer to redirect browser if iPod or iPhone detected. – Ryan Brodie Apr 20 '12 at 15:17
  • Thanks Ryan, this looks promising and I'll test it tomorrow. – Carl Veazey Apr 22 '12 at 19:42
  • @RyanBrodie just tried this and it didn't work, but I suspect that's because I'm hosting the file on S3 and not a web server actually running php. The only purpose of my entire web app is to launch this app with a certain URL scheme so we've not needed to have it actually be a real web app. – Carl Veazey Apr 24 '12 at 13:46