将移动浏览器深度链接到本机应用程序 - 未安装应用程序时的 Chrome 问题
Posted
技术标签:
【中文标题】将移动浏览器深度链接到本机应用程序 - 未安装应用程序时的 Chrome 问题【英文标题】：Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed 【发布时间】：2015-01-24 22:30:18 【问题描述】：我有一个网页，我们称之为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 移动网站可以正确执行此操作，无论是否安装了应用程序，Safari 和 Chrome，但我无法追踪负责它的代码:(
注意 2：我尝试附加 iframe 而不是 window.location = url，这仅适用于 Safari，即使安装了应用，移动 Chrome 在附加 iFrame 时也不会进行深度链接。
谢谢大家！
更新：
我找到了一个不错的解决方案，并回答了我自己的问题。请参阅我的解决方案接受的答案。
【问题讨论】：
这里有一个类似的问题***.com/questions/5679918/… @AlexKey 谢谢。但这并不能回答我的问题。未安装应用程序时如何处理移动Chrome？ 这是一个后续帖子，请注意阅读作者不知道的有关 http 链接的 cmets：aawaara.com/post/88310470252/… @AlexKey 我会检查并尽快更新。谢谢 嘿@geevee。我建议将所有这些抽象到分支服务 (branch.io) 中——我参与的一个项目。分支链接为您处理所有这些复杂性，并根据浏览器选择正确的方法。您选择的答案的问题在于选择器。用户这样做很烦人，人们经常放弃。如果您使用 Chrome 中的意图和 Firefox/默认浏览器/其他的其他机制，它将无缝打开应用程序。 【参考方案1】：对于感兴趣的人，我设法找到了一个不错的解决方案，通过在 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>
现在，在应用清单中声明后，我将向自己发送一封电子邮件，其中包含 "http://www.myapp.com"。
当用 Android 设备点击链接时，会出现一个“选择器”对话框，询问我想用哪个应用程序打开以下内容？ [chrome, myapp]
点击“常规”网址时出现此对话框的原因是，我们使用 http 方案注册了意图。
使用这种方法，深层链接甚至不在网页中处理，而是由设备自己处理，当点击一个匹配链接到 Android 应用清单中定义的现有意图规则时。
是的，正如我所说，这种方法在概念上与 iOS 方法不同，iOS 方法从网页中调用深层链接，但它解决了问题，并且发挥了神奇的作用。
注意：当应用未安装时，不会出现选择对话框，您只会被导航到具有给定地址的实际网页（除非您有超过 1 个浏览器，所以你需要选择一个......但不要吝啬）。
我真的希望这可以帮助面临同样事情的人..希望我有这样的解释;-)
干杯。
【讨论】：
所以它可以在 Android 上运行，但在 iOS 设备上却不能运行，是吗？ @Martin iOS 设备继续使用问题中提到的方法，尝试深度链接 + 回退到网页。 即使在 iOS Chrome 或 Google 邮件上？【参考方案2】：确保当您尝试使用 JavaScript 打开深层链接 URL 时，该 URL 的格式正确适用于设备和浏览器，这一点非常重要。 （如果您没有为浏览器/平台使用适当的深度链接 URL，用户可能会被重定向到“未找到页面”，这就是您所遇到的。）
现在您必须注意，Android 上的 Chrome 与旧的标准 Android 浏览器具有不同的 URL 格式 1！您需要在网页的 HTML 标记中使用 href="android-app://" 注释深层链接。您可以在每个网页的部分中通过添加标记并将深层链接指定为备用 URI 来执行此操作。
例如，以下 HTML sn-p 显示了如何在 URL 为 example://gizmos 的网页中指定相应的深层链接。
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
更多详情，请参阅此处的参考资料：https://developer.chrome.com/multidevice/android/intentshttps://developers.google.com/app-indexing/webmasters/serverhttps://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
还有一款适用于 Android 的深度链接测试工具：https://developers.google.com/app-indexing/webmasters/test.html
希望对您有所帮助。
1 由于旧的 AOSP 浏览器已被 chromium 取代，因此现在这是处理最新 Android 版本的深层链接的默认方式。尽管如此，Android 仍然需要有条件的解决方案，因为旧的操作系统版本仍然使用 AOSP 浏览器。
【讨论】：
【参考方案3】：我创建了一个 Javascript 插件，它支持大多数现代移动浏览器。但它需要在跨域（不同于通用链接 url）上托管深度链接登录页面才能使用通用链接在 ios9 Facebook 上工作。使用 Facebook SDK 在 Facebook iOS9 上也有不同的方法来实现这一点。如果有人觉得这有帮助，我会分享这个。目前它没有回退选项，但如果回退到 App Store。
https://github.com/prabeengiri/DeepLinkingToNativeApp
【讨论】：
如何打开具体路线？例如。 game://room/id 是自动打开还是等待用户点击？【参考方案4】：我正在使用此代码进行深度链接。 如果安装了该应用程序，该应用程序将打开.. 如果未安装该应用程序，则保持原样.. 如果您想为应用未安装添加任何其他条件，只需取消注释 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>
【讨论】：
使用 iframe 来避免任何形式的页面导航正是我想要的 - 谢谢。 iframe 的“onload”不起作用：***.com/questions/20572734/…【参考方案5】：setTimeout(function () if (document.hasFocus()) window.location = 'URL WILL BEHERE'; , 2000);
window.location = 'app://';
这里需要检查 document.hasFocus() 因为如果应用程序打开了，那么 playstore url 也会在浏览器中打开
【讨论】：
这个东西只在 chrome 中有效，但在其他浏览器中没有给出期望的行为 然后使用浏览器检查您的 javascript。如果是 chrome，则运行此代码，如果是 safari，则运行其他代码。【参考方案6】：我也有类似的问题，有一个可能的替代方案。如果该应用未安装在用户的设备上，我们可以将其重定向到其他一些 url。了解更多关于它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>
【讨论】：
【参考方案7】：在我的情况下，它在 Opera 和 chrome 浏览器中运行良好，我的深层链接 url 是
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
对于其他浏览器，创建 iframe 并附加 url。 注意 - ：iframe url 附加与旧设备有问题，并在 Firefox 中打开应用程序对话框。
【讨论】：
以上是关于将移动浏览器深度链接到本机应用程序 - 未安装应用程序时的 Chrome 问题的主要内容，如果未能解决你的问题，请参考以下文章