28

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

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

如果深层链接失败（可能是设备上没有安装应用程序），用户应该“退回”到另一个页面——让我们调用它fallback.html。

这是正在运行的 javascript 代码entry.html：

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

这是全网推荐的标准深度链接方法；尝试深度链接，如果超时触发，则意味着深度链接没有发生 - 所以回退。

这工作正常，只要应用程序安装在设备上。

但如果未安装应用程序，这是尝试深度链接时的行为：

移动 Safari：我看到一条警告消息说“Safari 无法打开此页面...”，然后它会正确回退到fallback.html- 这是预期的行为。

移动 Chrome是我的问题。

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

最后- 我的问题是：

如何修复我的代码，以便在移动 Chrome 上也会发生回退？就像移动 Safari 一样？

注意：我看到 LinkedIn 移动网站可以正确执行此操作，无论是否安装了应用程序，Safari 和 Chrome，但我无法追踪负责它的代码 :(

注意2：我尝试附加一个iframe而不是window.location = url，这仅适用于Safari，即使安装了应用程序，移动Chrome在附加iFrame时也不会进行深度链接。

谢谢大家！

更新：

我找到了一个不错的解决方案，并回答了我自己的问题。请参阅我的解决方案接受的答案。

4

7 回答 7

17

对于感兴趣的人，我设法找到了一个不错的解决方案，通过在 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 设备点击链接时，会出现一个“选择器”对话框，询问我想用哪个应用程序打开以下内容？[铬，我的应用]

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

使用这种方法，当点击指向 Android 应用清单中定义的现有意图规则的匹配链接时，甚至不会在网页中处理深度链接，而是由设备本身处理。

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

注意：当未安装应用程序时，不会出现选择器对话框，您只会导航到具有给定地址的实际网页（除非您有超过 1 个浏览器，因此您需要选择一个.. .但不要小气）。

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

干杯。

于 2015-03-15T12:40:59.407 回答
10

确保当您尝试使用 JavaScript 打开深层链接 URL 时，确保该 URL 的格式适合设备和浏览器，这一点非常重要。（如果您没有为浏览器/平台使用适当的深层链接 URL，用户可能会被重定向到“未找到页面”，这就是您所经历的。）

现在您必须注意，Android 上的 Chrome 与旧的标准 Android 浏览器 1具有不同的 URL 格式！您需要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>

有关更多详细信息，请参阅此处的参考资料：
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 浏览器已被 chromium 取代，因此现在这是处理最新 Android 版本的深层链接的默认方式。尽管如此，Android 仍然需要有条件的解决方案，因为旧的操作系统版本仍然使用 AOSP 浏览器。

于 2015-01-02T20:53:47.753 回答
1

我正在使用此代码进行深度链接。如果应用程序已安装，应用程序将打开。如果应用程序未安装，则保持原样。如果您希望为应用程序未安装添加任何其他条件，则只需取消注释 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>
于 2015-09-03T13:50:59.733 回答
1

我创建了一个 Javascript 插件，它支持大多数移动设备上的现代浏览器。但它需要在跨域（不同于通用链接 url）上托管深度链接登录页面，才能使用通用链接在 ios9 Facebook 上工作。使用 Facebook SDK 在 Facebook iOS9 上也有不同的方法来实现它。如果有人觉得这有帮助，我会分享这个。目前它没有回退选项，但如果回退到 App Store。

https://github.com/prabeengiri/DeepLinkingToNativeApp

于 2016-02-09T23:08:30.390 回答
0 
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
         window.location = 'app://';

需要在这里检查 document.hasFocus() 因为如果应用程序已打开，那么 playstore url 也会在浏览器中打开

于 2019-11-07T12:08:47.477 回答
0

我也有类似的问题，有一个可能的替代方案。如果应用程序未安装在用户的设备上，我们可以将其重定向到其他一些 url。要了解更多信息，请点击此处

例子：

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

于 2019-11-21T11:21:20.303 回答
0

就我而言，它在 Opera 和 chrome 浏览器中运行良好，我的深层链接 url 是 "intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";

对于其他浏览器，创建 iframe 并附加 url。注意 - ：iframe url 附加旧设备有问题，并且在 Firefox 中打开应用程序对话框。

于 2020-01-24T10:52:17.350 回答