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

gee*_*vee 24 javascript deep-linking mobile-website mobile-chrome

我有一个网页,我们可以打电话给它entry.html.

当用户进入此页面时,javascript代码(见下文)正在尝试将用户深层链接到本机iOS/Android应用程序.

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

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

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

这是一种标准的深层链接方法,建议在整个网络中使用; 尝试深层链接,如果超时触发它意味着深层链接没有发生 - 所以回退.

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

但是如果没有安装应用程序,这是尝试深层链接时的行为:

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

移动Chrome是我的问题.

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

最后 - 我的问题是:

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

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

注意2:我尝试添加一个iframe而不是window.location = url,这只适用于Safari,即使安装了应用程序,移动Chrome也不会在追加iFrame时进行深层链接.

谢谢大家!


更新:

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

gee*_*vee 13

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

我放弃了这种myapp://方法,我只在iOS设备的情况下才能使用它.

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

我主要是一个Web开发人员,而不是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>
Run Code Online (Sandbox Code Playgroud)

现在,在应用清单中宣布这个之后,我在邮件中发送了一封带有" http://www.myapp.com "的电子邮件.

当使用Android设备点击链接时,会出现"选择器"对话框,询问我想打开以下哪个应用程序?[chrome,myapp ]

在点击"常规"网址时出现此对话框的原因是因为我们使用http方案注册了intent .

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

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

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

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

干杯.


eye*_*hUp 8

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

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

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

<html>
<head>
    <link rel="alternate"
          href="android-app://com.example.android/example/gizmos" />
    ...
</head>
<body> ... </body>
Run Code Online (Sandbox Code Playgroud)

有关详细信息,请参阅此处的参考:
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浏览器.