将移动浏览器深层链接到本机应用程序 - 未安装应用程序时Chrome的问题

时间:2014-11-26 14:36:59

标签: javascript mobile-website deep-linking mobile-chrome

我有一个网页,我们称之为entry.html

当用户进入此页面时,javascript代码(请参阅下文)正在尝试将用户深层链接到原生iOS / Android应用。

如果深层链接失败(可能是设备上没有安装该应用),用户应该“退回”到另一个页面 - 让我们称之为fallback.html

这是在entry.html上运行的javascript代码:

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

这是一种在整个网络中推荐的标准深层链接方法;尝试深层链接,如果超时触发,则表示没有发生深层链接 - 所以后退。

这很好用,因为设备上安装了很长的应用程序。

但如果未安装该应用,则尝试深层链接时会出现这种情况:

移动Safari :我看到一条提示消息“Safari无法打开此页面...”片刻,然后它正确地回落到fallback.html - 这是预期的行为。

移动Chrome 是我的问题。

当没有安装应用程序时,浏览器实际上被重定向到myapp://网址,这当然是无效的 - 所以我得到一个“未找到”页面,并且不会发生回退。

最后 - 我的问题是:

如何修复我的代码,以便在移动Chrome上也会发生FALL-BACK?就像移动Safari一样?

注意:我看到LinkedIn移动网站正确地做到这一点,使用Safari& Chrome,无论是否安装了应用,但我无法追踪负责它的代码:(

note2:我尝试添加iframe代替window.location = url,这仅适用于Safari,即使安装了应用,移动Chrome在附加iFrame时也不会进行深层链接。< / em>的

全部谢谢!


更新

我找到了一个不错的解决方案,并回答了我自己的问题。看到我的解决方案的接受答案。

7 个答案:

答案 0 :(得分:13)

对于任何有兴趣的人,我设法通过在Android上深度链接Chrome来找到解决这些问题的合适解决方案。

我放弃了myapp://方法,我只在iOS设备的情况下才能运行。

对于Android设备,我现在使用的intents 概念上不同,而不是myapp://协议。

我主要是一名网络开发人员,而不是Android开发人员,因此我花了一些时间来理解这个概念,但这很简单。我将尝试在这里解释和演示我的解决方案(请注意,还有其他方法可以用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设备点击链接时,会出现“选择器”对话框,询问我要打开以下哪个应用程序? [chrome, myapp ]

点击“常规”网址时出现此对话框的原因是因为我们使用 http 方案注册了意图。

使用这种方法,深度链接甚至不在网页中处理,当点击与Android应用清单中定义的现有意图规则的匹配链接时,它由设备本身处理。 / p>

是的,正如我所说,这种方法与iOS方法的概念不同,iOS方法从网页中调用深层链接,但它解决了问题,并且它具有魔力。

注意:当没有安装应用时,不会出现选择器对话框,您只需导航到具有给定地址的实际网页(除非您有多个浏览器,所以你需要选择一个...但不要小气。)

我真的希望这可以帮助那些面对同样事情的人......希望我有这样的解释; - )

欢呼声。

答案 1 :(得分:8)

当您尝试使用JavaScript打开深层链接网址时,确保网址格式正确适用于设备和浏览器非常重要。 (如果您没有为浏览器/平台使用适当的深层链接URL,则可能会将用户重定向到“找不到页面”,这是您所体验的。)

现在您必须注意,Android上的 Chrome与旧标准Android浏览器的网址格式不同 1 !您需要在网页的HTML标记中使用href="android-app://"注释深层链接。您可以在每个网页的部分中执行此操作,方法是添加标记并将深层链接指定为备用URI。

例如,以下HTML代码段显示了如何在具有URL示例的网页中指定相应的深层链接:// gizmos。

<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浏览器被chrome取代,现在这是处理最新Android版本的深层链接的默认方式。尽管如此,Android仍然需要条件解决方案,因为较旧的操作系统版本仍然使用AOSP浏览器。

答案 2 :(得分:1)

我正在使用此代码进行深层链接。 如果安装了该应用程序,该应用程序将打开.. 如果没有安装该应用程序,那么这仍然是原样.. 如果您希望为app no install添加任何其他条件,则只需取消注释setTimeout代码。

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

答案 3 :(得分:1)

我创建了一个Javascript插件,它支持移动设备上的大多数现代浏览器。但它需要在跨域(不同于通用链接URL)上托管深层链接登录页面,以便使用通用链接在ios9 Facebook上工作。使用Facebook SDK在Facebook iOS9上运行也有不同的方法。如果有人觉得这有用,我会分享这个。目前它没有后备选项,但如果退回到App Store。

https://github.com/prabeengiri/DeepLinkingToNativeApp

答案 4 :(得分:0)

setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
         window.location = 'app://';

需要在此处检查document.hasFocus(),因为如果应用已打开,则Playstore网址也在浏览器中打开

答案 5 :(得分:0)

我也有类似的问题,对此有可能的替代方法。如果该应用未安装在用户设备上,我们可以将其重定向到其他网址。要详细了解Check Here

示例:

<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=YOUR_WEBSITE_URL;end"> Take a QR code </a>

答案 6 :(得分:0)

就我而言,它在Opera和chrome浏览器中可以正常工作,我的Deeplink网址为 "intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";

对于其他浏览器,请创建iframe并附加网址。 注意-:iframe网址附加问题与旧设备有关,并且在Firefox中打开了应用对话框。