Javascript 将移动浏览器深层链接到本机应用程序 - 未安装应用程序时 Chrome 出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27151806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed
提问by geevee
I have a webpage, lets call it entry.html.
我有一个网页，可以叫它entry.html。
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
当用户进入此页面时，javascript 代码（见下文）试图将用户深层链接到本机 iOS/Android 应用程序。
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
如果深层链接失败（可能是应用程序没有安装在设备上），用户应该“退回”到另一个页面——我们称之为fallback.html。
here is the javascript code that is running on entry.html:
这是运行的 javascript 代码entry.html：
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
这是全网推荐的标准深度链接方法；尝试深层链接，如果超时触发，则意味着深层链接没有发生 - 所以回退。
this works fine, as long app is installed on device.
这工作正常，只要应用程序安装在设备上。
but if the app isn't installed, this is the behaviour when trying to deep-link:
但如果未安装该应用程序，这是尝试深层链接时的行为：
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
移动 Safari：我看到一条警告消息说“Safari 无法打开此页面...”片刻，然后它正确回退到fallback.html- 这是预期的行为。
Mobile Chromeis my problem.
移动 Chrome是我的问题。
when the app isn't installed, browser is actually redirected to the myapp://url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
当应用程序未安装时，浏览器实际上被重定向到myapp://url，这当然是无效的 - 所以我得到一个“未找到”页面，并且不会发生回退。
Finally- my question is:
最后- 我的问题是：
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
如何修复我的代码，以便在移动 Chrome 上也会发生回退？就像移动 Safari 一样？
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
注意：我看到 LinkedIn 移动网站可以正确执行此操作，使用 Safari 和 Chrome，无论是否安装了该应用程序，但我无法追踪对此负责的代码:(
note2: i tried appending an iframeinstead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
注意2：我尝试附加一个iframe而不是window.location = url，这仅适用于 Safari，即使安装了应用程序，移动 Chrome 在附加 iFrame 时也不会进行深层链接。
Thanks all!
谢谢大家！
UPDATE:
更新：
i found a decent solution, and answered my own question. see accepted answer for my solution.
我找到了一个不错的解决方案，并回答了我自己的问题。请参阅我的解决方案的已接受答案。
采纳答案by geevee
for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
对于有兴趣的人，我设法找到了一个不错的解决方案，通过在 Android 上深度链接 Chrome 来解决这些问题。
i abandoned the myapp://approach, i left it functioning only in cases of an iOS device.
我放弃了这种myapp://方法，我让它只在 iOS 设备的情况下运行。
for Android devices, i'm now using intentswhich are conceptually differentthan the myapp://protocol.
对于 Android 设备，我现在使用的intents是在概念上与myapp://协议不同的设备。
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
我主要是 Web 开发人员，而不是 Android 开发人员，所以我花了一些时间来理解这个概念，但它很简单。我将尝试在这里解释和演示我的解决方案（请注意，还有其他方法可以用 实现intents，但这个方法对我来说非常有效）。
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http"- we'll talk about it shortly):
这是 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>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com"in the message.
现在，在应用程序清单中声明后，我将向自己发送一封电子邮件，邮件中包含“ http://www.myapp.com”。
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
当使用 Android 设备点击链接时，会出现一个“选择器”对话框，询问我想用哪个应用程序打开以下内容？[铬，MYAPP]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the httpscheme.
在点击“常规”网址时出现此对话框的原因是我们使用http方案注册了意图。
with this approach, the deeplink isn't even handled in the webpage, it's handled by the deviceitself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
使用这种方法，深度链接甚至不在网页中处理，而是由设备本身处理，当点击与 Android 应用程序清单中定义的现有意图规则的匹配链接时。
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
是的，正如我所说的，这种方法在概念上与 iOS 方法不同，后者从网页内部调用深层链接，但它解决了问题，并且发挥了神奇作用。
Note:when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
注意：当未安装应用程序时，不会出现选择器对话框，您只会导航到具有给定地址的实际网页（除非您有 1 个以上的浏览器，因此您需要选择一个.. .但不要小气）。
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
我真的希望这可以帮助面临同样事情的人..希望我有这样的解释;-)
cheers.
干杯。
回答by eyecatchUp
It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
确保当您尝试使用 JavaScript 打开深层链接 URL 时，该 URL 的格式适合设备和浏览器，这一点非常重要。（如果您没有为浏览器/平台使用适当的深层链接 URL，则用户可能会被重定向到“找不到页面”，这就是您所遇到的情况。）
Now you must note that Chrome on Android has a different URL format than the old standard Android browser1! You need to annotate the deep links using href="android-app://"in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
现在您必须注意，Android 上的 Chrome 具有与旧标准 Android 浏览器1不同的 URL 格式！您需要href="android-app://"在网页的 HTML 标记中注释深层链接。您可以在每个网页的部分中通过添加标记并将深层链接指定为备用 URI 来执行此操作。
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
例如，以下 HTML 片段显示了如何在 URL 为 example://gizmos 的网页中指定相应的深层链接。
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
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
有关更多详细信息，请参阅此处的参考资料：
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
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
这是一个适用于 Android 的深层链接测试工具：https: //developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
希望有帮助。
1Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.
1由于旧的 AOSP 浏览器被 Chromium 取代，现在这是处理最新 Android 版本深度链接的默认方式。尽管如此，Android 仍然需要条件解决方案，因为较旧的操作系统版本仍然使用 AOSP 浏览器。
回答by Stephen Salve
I am Using this Code to for deeplinking. If the app is installed the app will open up.. If the app is not installed then this remains as it is.. If you wish to add any other condition for app no install then just uncomment the setTimeout code .
我正在使用此代码进行深层链接。如果应用程序已安装，应用程序将打开.. 如果应用程序未安装，则保持原样。
<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>
回答by prabeen giri
I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
我创建了一个 Javascript 插件，它支持大多数移动设备上的现代浏览器。但是它需要在跨域（不同于通用链接网址）上托管深层链接登陆页面，才能使用通用链接在 ios9 Facebook 上工作。也有不同的方法可以使用 Facebook SDK 在 Facebook iOS9 上运行。如果有人觉得这有帮助，我会分享这个。目前它没有回退选项，但如果回退到 App Store。
回答by Arun kumar
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser
需要在这里检查 document.hasFocus() 因为如果应用程序打开，那么 Playstore url 也在浏览器中打开
回答by hardik chugh
I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
我也有类似的问题，有一个可能的替代方案。如果该应用程序未安装在用户的设备上，我们可以将其重定向到其他一些 url。要了解更多信息，请查看此处
Example:
例子：
<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>
<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>
回答by Sachin Kumar
In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
就我而言，它在歌剧和 chrome 浏览器中工作正常，我的深层链接网址是
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url. Note -: iframe url append having issue with old device and in firefox its opening app dialog .
对于其他浏览器，创建 iframe 并附加 url。注意：iframe url append 与旧设备有问题，在 Firefox 中打开应用程序对话框。
