通过 JavaScript 打开应用程序(iOS/Android),并返回到 App/Play 商店(2016 版)的后备重定向

Posted

技术标签:

【中文标题】通过 JavaScript 打开应用程序(iOS/Android),并返回到 App/Play 商店(2016 版)的后备重定向【英文标题】:Open an app (iOS/Android) via JavaScript, with a fallback redirect to App/Play store (2016 edition) 【发布时间】:2016-12-13 14:32:23 【问题描述】:

给定:网站、iosandroid 应用程序,注册 urlscheme “myapp://”。

目标:在网站上显示安装了应用程序的 iOS/Android 设备的链接。单击该链接应打开应用程序并调用特定逻辑(由应用程序处理,基本上就像来自苹果的“通用链接”,但没有隐藏网站链接)。

由于安全限制,如果没有 webview cookie 魔法,检测应用是否已安装很麻烦。鉴于此,尝试通过 javascript 打开应用并在失败时调用回退重定向的最佳方法是什么?

来自该线程的解决方案:Is it possible to register a http+domain-based URL Scheme for iPhone apps, like YouTube and Maps? 不适用于 iOS10。不确定 Android。

【问题讨论】:

【参考方案1】:

在 2016 年,仅靠 Javascript 是不可能实现的

您仍然可以在 Android 上使用该方法,但 Apple 在 iOS 9.2 中进行了更改,这意味着这在 iOS 设备上基本上没用。


过去在 iOS 上的工作方式

过去这样做的方法是尝试通过将 window.location 设置为您想要的自定义 URI 路径来尝试在 Javascript 中打开应用程序。

window.location = “imdb://title/tt3569230”;

应用未安装

这样做的问题是,当应用程序未安装时,它会显示“无法打开页面”错误。相信大家都看过了。这是深度链接的祸根。在 iOS 7 和 iOS 8 中有一段辉煌的时期是可以绕过的,但黄金时代已经过去了。

为了避免这种情况,您必须在页面中添加一些 Javascript,以便重定向到 App Store。这样,用户就不会在屏幕上看到错误。

window.location = 'imdb://title/tt3569230';
setTimeout(function() 
  window.location = 'itms-apps://itunes.apple.com/us/app/imdb-movies-tv/id342792525'
, 250);

应用已安装

应用安装完成后,会显示如下模式,提示用户是否要打开应用:

现在发生的事情是,在 iOS 9 中,Apple 将 Open in "[app]" 模态从 Javascript blocking 模态更改为 non-blocking 模态。这意味着当您尝试通过 Javascript 重定向到自定义 URI 方案打开应用程序时,模式将不再阻止 Javascript 执行,结果是回退重定向到 App Store 将在用户之前立即执行可以点击“打开”按钮

Branch.io(全面披露:我是 Branch 团队的一员),我们在 iOS 9.2 测试版中看到了这个问题,并希望我们的 Apple 雷达(错误报告)和有影响力的合作伙伴能够激励 Apple 解决这个问题释放。不幸的是,iOS 开发人员并非如此。 Apple 对我们的担忧的回应非常清楚地表明了他们希望每个人都做的事情:采用 Universal Links。


2016 年解决方案

拥有在任何地方都可以使用的单个链接的唯一方法(包括在已安装的应用程序中路由到应用程序或在未安装的情况下回退 Web URL)必须包括在 iOS 上使用通用链接。当然,通用链接实际上在 iOS 中并没有在所有地方都得到支持,所以在某些特定的边缘情况下仍然需要自定义 URI 方案(Chrome 和 Gmail 是两个大例子)。您需要检测这些并构建自定义处理。

大多数公司没有资源为此投入一名(或两名)全职工程师,这就是为什么 Pinterest、Tinder、Airbnb、Jet.com、Yummly 等都采用了像@这样的链接平台987654322@ 或 Firebase 动态链接。

【讨论】:

我知道我在这里做考古学家,但如果我只是想在 facebook 深层链接上做一个后备呢?我正在做一个小网站,Branch.io 似乎有点矫枉过正。我只需要 Facebook 个人资料上的深层链接和 Instagram 个人资料上的深层链接。实施回退是我的责任吗? @Groben Branch 专为您自己的应用程序而设计。它不适用于链接到 Facebook 和 Instagram,所以是的......你需要自己构建重定向!【参考方案2】:

所以它在 ios 上运行而不总是在安装应用程序时打开商店的方式是做这样的事情:

function isIOS() 
    const iDevices = [
        'iPad Simulator',
        'iPhone Simulator',
        'iPod Simulator',
        'iPad',
        'iPhone',
        'iPod'
    ];

    if (navigator.platform) 
        while (iDevices.length) 
            if (navigator.platform === iDevices.pop()) 
                return true;
            
        
    

    return false;


let openedApp = false;

function openAppOrStore() 
    setTimeout(function () 
        if (!openedApp) 
            window.location = "https://apps.apple.com/us/app/petleo/id1462882016";
        
    , 25);
    const parts = window.location.href.split('/');
    const consultationId = parts[parts.length - 2];
    const iosLink = "petleo://consultations/" + consultationId;
    try 
        window.location = iosLink;
        if (window.location.href.indexOf("petleo://") !== -1) 
            openedApp = true;
        
     catch (e)    
    


setTimeout(function () 
    if (window.location.href.indexOf('consultation') !== -1) 
        if (isIOS()) 
            openAppOrStore();
        
    
, 25);

【讨论】:

所以在 iOS 14 上遇到了@AlexBauer 描述的问题,如果安装了应用程序,Safari 仍然会在 25 毫秒后将用户重定向到应用商店。

以上是关于通过 JavaScript 打开应用程序(iOS/Android),并返回到 App/Play 商店(2016 版)的后备重定向的主要内容,如果未能解决你的问题,请参考以下文章

打开 Facebook 应用的“点赞”按钮

在 javascript/Angular JS 中安装并打开 Android /ios 原生应用程序

如何使用 Javascript/PHP 从 Web 应用程序打开移动应用程序(Android 或 iOS)

ios - 如何在 Web 视图中使用 javascript 打开 swift 视图?

iOS - Javascript 未按预期工作

强制 Youtube 链接在 Android/iOS 上的应用程序中打开