title: How to open a native iOS app from a web app
body: <p><strong>Summary</strong> 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.</p>
  
  <p><strong>Details</strong> 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 <code>+openURL:</code> method of <code>UIApplication</code>. I would like to also open it with certain arguments from a native web app that can be added to the home screen.</p>
  
  <p>What I'm trying to do is use JavaScript like so inside the native app:</p>
  
  <pre><code>window.location = "myapp://myparam";
  </code></pre>
  
  <p>When using this code inside the web app I get an alert saying:</p>
  
  <blockquote>
    <p>"Cannot Open myWebAppName - myWebAppName could not be opened. The
    error was "This URL can't be shown".".</p>
  </blockquote>
  
  <p>This same javascript when executed within Safari works correctly. I get the same result using <code>window.location.replace("myapp://myparam")</code>.</p>
  
  <p>The html for the web app is:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;untitled&lt;/title&gt;
      &lt;meta name="generator" content="TextMate http://macromates.com/"&gt;
      &lt;meta name="author" content="Carl Veazey"&gt;
      &lt;!-- Date: 2012-04-19 --&gt;
      &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          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';
          };
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong here? I'm pretty inexperienced with javascript and mobile web so I suspect I'm just missing something obvious.</p>