web-dev-qa-db-ja.com

ネイティブアプリへのモバイルブラウザーのディープリンク-アプリがインストールされていない場合のChromeの問題

ウェブページがあります。entry.htmlと呼びます。

ユーザーがこのページに入ると、javascriptコード（下記を参照）がユーザーをネイティブiOS/Androidアプリにディープリンクしようとしています。

ディープリンクが失敗した場合（おそらくアプリがデバイスにインストールされていない場合）、ユーザーは別のページに「フォールバック」する必要があります。fallback.htmlと呼びます。

entry.htmlで実行されているjavascriptコードは次のとおりです。

$(function(){
    window.location = 'myapp://';
    setTimeout(function(){
        window.location = 'fallback.html';
    }, 500);
});

これは、ネットワーク全体で推奨される標準のディープリンク方法です。ディープリンクを試行し、タイムアウトが発生した場合、ディープリンクが発生しなかったことを意味するため、フォールバックします。

アプリがデバイスにインストールされている限り、これは正常に機能します。

ただし、アプリがインストールされていない場合、これはディープリンクを試みるときの動作です。

Mobile Safari：「Safariはこのページを開くことができません...」という警告メッセージが表示されますが、fallback.html-に適切にフォールバックします。これは予想される動作です。

モバイルChromeは私の問題です。

アプリがインストールされていない場合、ブラウザは実際にmyapp:// URLにリダイレクトされますが、これはもちろん無効です。そのため、「見つかりません」ページが表示され、フォールバックは発生しません。

最終的に-私の質問は：

フォールバックがモバイルで発生するようにコードを修正するにはどうすればよいですかChrome？モバイルSafariのように？

注：LinkedInモバイルWebサイトでは、SafariとChromeを使用して、アプリがインストールされているかどうかにかかわらず、これを適切に行うことがわかりますが、その原因となったコードを追跡できませんでした：（

note2：window.location = urlの代わりにiframeを追加しようとしましたが、これはSafariでのみ機能します。モバイルChromeは深くありません-アプリがインストールされていてもiFrameを追加するときにリンクします。

皆さんありがとう！

更新：

私はまともな解決策を見つけ、自分の質問に答えました。私のソリューションの受け入れられた答えを参照してください。

javascriptmobile-websitedeep-linkingmobile-chrome
24
geevee

興味のある人は誰でも、AndroidのChromeをディープリンクすることでこれらの問題を解決するための適切なソリューションを見つけることができました。

myapp://アプローチを放棄し、iOSデバイスの場合にのみ機能するようにしました。

Androidデバイスの場合、myapp://プロトコルよりも概念的に異なるであるintentsを使用しています。

私はAndroid開発者ではなく、主にWeb開発者です。そのため、この概念を理解するのに時間がかかりましたが、非常に簡単です。ここでMYソリューションの説明とデモンストレーションを試みます（intentsで実装できる他のアプローチがありますが、このアプローチは完全に機能しました）。

ここに、Androidアプリマニフェストの関連部分があり、インテントルールを登録します（Android:scheme="http"に注意してください-すぐに説明します）。

<receiver Android:name=".DeepLinkReceiver">
    <intent-filter >
        <data Android:scheme="http" Android:Host="www.myapp.com" />
        <action Android:name="Android.intent.action.VIEW" />
        <category Android:name="Android.intent.category.BROWSABLE"/>
        <category Android:name="Android.intent.category.DEFAULT"/>
    </intent-filter>
</receiver>

今、これがアプリマニフェストで宣言された後、メッセージに" http://www.myapp.com "を含むメールを自分で送信しています。

Androidデバイスでリンクがタップされると、「chooser」ダイアログが表示され、次のアプリケーションを開きたいアプリケーションを尋ねられますか？ [chrome、myapp]

「通常の」URLをタップしてこのダイアログが表示された理由は、インテントをhttpスキームで登録したためです。

このアプローチでは、ディープリンクはWebページでも処理されず、Androidアプリで定義された既存のインテントルールへの一致するリンクをタップするときにデバイス自体によって処理されます。マニフェスト。

はい、私が言ったように、このアプローチは、Webページ内からディープリンクを呼び出すiOSアプローチとは概念が異なりますが、問題を解決し、魔法をかけます。

注：アプリがインストールされていない場合、選択ダイアログは表示されず、指定されたアドレスの実際のWebページに移動します（複数のブラウザがない場合は、いずれかを選択する必要があります...しかし、ささいなことはできません）。

私はこれが同じ事に直面している人を助けることができることを本当に願っています。

乾杯。

13
geevee

JavaScriptでディープリンクURLを開こうとするとき、URLが適切にフォーマットされていることを確認することは非常に重要ですデバイスとブラウザの場合。 （ブラウザ/プラットフォームに適切なディープリンクURLを使用しない場合、ユーザーは「ページが見つかりません」にリダイレクトされる可能性があります。）

ここで、Chrome on AndroidのURL形式は古い標準のAndroid browser 1！ WebページのHTMLマークアップでhref="Android-app://"を使用して、ディープリンクに注釈を付ける必要があります。これを行うには、各Webページのセクションで、タグを追加し、代替URIとしてディープリンクを指定します。

たとえば、次のHTMLスニペットは、example：// gizmosというURLを持つWebページに対応するディープリンクを指定する方法を示しています。

<html>
<head>
    <link rel="alternate"
          href="Android-app://com.example.Android/example/gizmos" />
    ...
</head>
<body> ... </body>

詳細については、次のリファレンスを参照してください。
https://developer.chrome.com/multidevice/Android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.Android.com/training/app-indexing/enabling-app-indexing.html#webpages

そして、ここにAndroid用のディープリンクテストツールがあります： https://developers.google.com/app-indexing/webmasters/test.html

それが役に立てば幸いです。

1 古いAOSPブラウザはクロムに置き換えられたため、これは最近のAndroidバージョンのディープリンクを処理するデフォルトの方法です。それでも、Android古いOSバージョンでもAOSPブラウザを使用しているため、ソリューション。

8
eyecatchUp

Javascriptプラグインを作成しました。これは、モバイルで最新のブラウザーのほとんどをサポートしています。ただし、ユニバーサルリンクを使用してios9 Facebookで動作するには、クロスドメイン（ユニバーサルリンクURLとは異なる）でホストされるディープリンクのランディングページが必要です。 Facebook SDKを使用してFacebook iOS9でそれを機能させる別の方法もあります。誰かがこれが役立つと思うなら、私はこれを共有しています。現在、フォールバックオプションはありませんが、App Storeにフォールバックする場合。

https://github.com/prabeengiri/DeepLinkingToNativeApp

1
prabeen giri

ディープリンクにこのコードを使用しています。アプリがインストールされている場合、アプリが開きます。アプリがインストールされていない場合、これはそのまま残ります。

<script>

var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
    call_me_new(deeplinking_url);
});

var call_me_new = function(deeplinking_url){

    if(deeplinking_url!=''){
        var fallbackUrl ='http://scootsy.com/';
        var iframe = document.createElement("iframe");
        var nativeSchemaUrl = deeplinking_url;
        console.log(nativeSchemaUrl);

        iframe.id = "app_call_frame";
        iframe.style.border = "none";
        iframe.style.width = "1px";
        iframe.style.height = "1px";
        iframe.onload = function () {
            document.location = nativeSchemaUrl;
        };
        iframe.src = nativeSchemaUrl; //iOS app schema url
        window.onload = function(){
            document.body.appendChild(iframe);
        }

        //IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
        /*
        setTimeout(function(){
            console.log('Iframe Removed...');
            document.getElementById("app_call_frame").remove();

        window.location = fallbackUrl; //fallback url
        },5000);*/
    }
};
</script>
1
Stephen Salve