web-dev-qa-db-ja.com

WebアプリからネイティブiOSアプリを開く方法

概要ホーム画面に保存されているWebアプリから起動したいURLスキームが正しく機能するアプリがありますが、通常の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とモバイルウェブにかなり慣れていないので、明らかな何かを見逃しているのではないかと疑っています。

javascriptiosmobile-safari
28
Carl Veazey

モバイルサファリではコードは機能しますが、iOSデスクトップのブックマークからでは機能しません。以前はその方法で試したことはありませんでしたが、それが問題です。私はあなたのJSを

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

ブラウザでは機能しますが、ブックマークすると失敗します。クロムがないため、ブックマークされたときにURLがどのように読み込まれるかで何かをする必要がありますか？私の推測では、Appleは予約されたマークページがローカルアプリにアクセスすることを望まない。また、モバイルサファリで機能するローカルにホストされたページをブックマークすると、ブックマークを介してロードするように設定します。

私があなたに持っている最高の推薦はそれを作ることです

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

の代わりに

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

これにより、ホーム画面に表示されますが、残念ながらクロムが読み込まれます。それが私が考えることができる唯一の解決策です。

13
AJak

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);
8
Andrew Sklyarevsky

このようにしてみてください：インデックスページ

<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 } ?>
0
T.Todua