如何从 Web 应用程序打开本地 iOS 应用程序

31

概述 我有一个具有正确功能的URL方案的应用程序,我想从主屏幕上存储的Web应用程序启动它,但是常规的JavaScript重定向方法似乎不起作用。

详情 我正在尝试创建一个iOS Web应用程序,以便从保存在主屏幕上的链接中打开全屏模式。Web应用程序需要打开一个特定的本地应用程序。我已经为本地应用程序注册了url方案,并验证了它可以正常工作-例如,我可以通过将方案直接输入Safari地址栏来打开本机应用程序。我也可以使用UIApplication+openURL:方法从其他应用程序中打开它。我还希望能够从可以添加到主屏幕的本地Web应用程序中以特定参数打开它。

我想在本地应用程序中使用如下JavaScript:

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

在Web应用程序中使用此代码时,会弹出一个警报,内容为:

"无法打开myWebAppName - 无法打开myWebAppName。错误是“此URL无法显示”"。

在Safari中执行同样的JavaScript代码时,可以正常工作。我使用window.location.replace("myapp://myparam")得到了相同的结果。

Web应用程序的HTML代码如下:

<!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>

我在这里做错了什么?由于我对JavaScript和移动Web缺乏经验,我认为我可能只是忽略了一些显而易见的东西。


你能否重定向到应用商店链接? - ant
抱歉,请问您具体是什么意思?比如说,我能从我的网页应用程序打开应用商店吗?编辑:例如,我可以打开本地地图应用程序;我怀疑方案使用http就是为什么它起作用的原因。不幸的是,这对我的应用程序不起作用。 - Carl Veazey
1
那么在 URL 地址栏中输入 myapp://myparam 是可行的吗? - AJak
@c0mrade,那样做没什么用。他试图打开本地应用程序,而不是在iTunes上打开应用程序页面。如果用户被重定向到App Store链接,他们将进一步被引导到iDevice上iTunes中的应用程序页面...它不会打开应用程序本身。 - citruspi
嗨!我看到很多类似的问题,但是...你从来没有需要跳回到 Web 应用程序吗? - Josef Habr
显示剩余2条评论
5个回答

14

你的代码在移动版Safari中可以正常运行,但如果在iOS桌面上通过书签打开则不能正常工作。我以前从未尝试过这种方式,但这就是问题所在。如果我只是将你的JS设置为

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

它在浏览器中可用,但是当书签保存时失败了。这可能与当它被保存为书签时如何加载URL有关,因为没有Chrome?我猜苹果不希望书签页面访问本地应用程序。另外,我注意到如果我将一个本地托管的页面添加到书签中,在移动Safari中可以工作,但无法通过书签加载。真的很奇怪...

我对您的最佳建议是使其

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

这样它将出现在主屏幕上,但不幸的是会使用Chrome加载。这是我能想到的唯一解决方案。


谢谢,但我如何有条件地执行我的JavaScript呢?我在那里有一个if语句来检查用户代理,因为我希望从Safari导航到页面时与从主屏幕启动时的行为不同。你知道其他检查的方法吗?谢谢! - Carl Veazey
window.navigator.standalone 是我所知道的唯一方法,只有在启用 content="yes" 时才能正常工作。不确定是否可以实现您想要的功能。我可以看到苹果故意不允许开发人员制作一个主页按钮来启动另一个应用程序。这有点令人困惑,因为他们应该只是点击应用程序而不是加载应用程序的网页。 - AJak

9
如果你需要打开一个iOS应用程序并保留页面的功能,location.href = 'myapp://?params=...';将无法帮助你,因为如果myapp://没有注册,则重定向会导致用户到达无法访问的目的地。
最安全的方式似乎是使用一个iframe。以下代码将在iOS应用程序被安装时打开它,如果应用程序未安装,则不会导致失败(尽管它可能会提示用户,如果应用程序未被安装,则无法访问该页面):
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);

在浏览器上工作正常,但在电子邮件客户端浏览器上使用时无法正常工作。 - Ice_Drop

0
为了提供更新,iOS14 Beta7似乎无法通过其注册的x-callback URL打开任何本地应用程序。

0
尝试这样做: 首页
<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>

receiver.php页面:

<?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 } ?>

-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');      
}
?>

上面的代码将在设备是iPod或iPhone时将浏览器重定向到输入的URL(http://example.com/)。将此脚本添加到您的Web应用程序的顶部,确保将其保存为.php文件而不是.html文件。

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


抱歉如果我没有表达清楚。我已经完成了那部分 - 现在我需要使用JavaScript从主屏幕上保存的Web应用程序打开我的应用程序。我想我会重新措辞我的问题。 - Carl Veazey
粘贴您的JS / HTML会很有帮助。 - AJak
它是一个Web应用程序,保存在主屏幕上不应该有任何差别,只要URL格式正确,您的应用程序就应该会打开。或者您是否正在努力使用JS引发重定向?如果是这样,一个简单的JS header.location="URL" 就足够了。不过我不确定那是否符合您的需求。 - Ryan Brodie
更新的答案:如果检测到iPod或iPhone,则重定向浏览器。 - Ryan Brodie
@RyanBrodie 刚刚尝试了一下,但没有成功,但我怀疑这是因为我将文件托管在 S3 上,而不是实际运行 PHP 的 Web 服务器上。我的整个 Web 应用程序的唯一目的是使用特定的 URL 方案启动此应用程序,因此我们不需要它实际上成为真正的 Web 应用程序。 - Carl Veazey
显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接