H5-唤醒-APP-解决方案

共计 7371 个字符，预计需要花费 19 分钟才能阅读完成。

参考：https://github.com/bsxz0604/R…

// dom
<a id="openApp" href="javascript:;" title=""> 立即打开 </a>

// js
;(function (window) {var ue = {};

    // 客户端检测
    ue.browserInfo = function () {
        var json = {userAgent: navigator.userAgent.toLowerCase(),
            isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
            isIos: Boolean(navigator.userAgent.match(/iphone|ipod|ipad/ig)),
            isWeChat: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
            isQQ: Boolean(navigator.userAgent.match(/ QQ/ig)),
            isQQBrowser: Boolean(navigator.userAgent.match(/MQQBrowser/ig))
        }

        return json;
    }

    // 唤醒 APP
    ue.openApp = function () {var $downloadSelectBtn = $('#downloadSelect');
        var $btnOpenIos = $('#downloadIos');
        var browser = ue.browserInfo();
        var scheme = '';
        var iosVersion = browser.userAgent.match(/os\s*(\d+)/);
        var universalLink = 'a';

        iosVersion = iosVersion ? (iosVersion[1] || 0) : 0;

        if (browser.isAndroid) { // 安卓
            scheme = 'b';
        } else if (browser.isIos) { // ios
            scheme = 'c';
        }

        $btnOpenIos.on('click', function () {
            // 客户端检测微信
            if (browser.isWeChat) {$('.pop-openbrowser').show();} else {if (browser.isAndroid) {var ifr = document.createElement('iframe');
                    ifr.src = scheme;
                    ifr.style.display = 'none';
                    document.body.appendChild(ifr);

                    setTimeout(function () {document.body.removeChild(ifr);
                    }, 2000);
                } else {
                    // ios9+
                    if (iosVersion >= 9) {document.location.href = universalLink;} else {setTimeout(function () { // 必须要使用 settimeout
                            var a = document.createElement("a"); // 创建 a 元素
                            a.setAttribute("href", scheme), a.style.display = "none", document.body.appendChild(a);
                            var t = document.createEvent("HTMLEvents"); // 返回新创建的 Event 对象，具有指定的类型。t.initEvent("click", !1, !1) // 初始化新事件对象的属性
                            a.dispatchEvent(t) // 绑定事件
                        }, 0)
                    }
                }

                var checkOpen = function (cb) {var _clickTime = +(new Date());

                    function check(elsTime) {if (elsTime > 3000 || document.hidden || document.webkitHidden) {cb(1);
                        } else {cb(0);
                        }
                    }
                    // 启动间隔 20ms 运行的定时器，并检测累计消耗时间是否超过 3000ms，超过则结束
                    var _count = 0,
                        intHandle;
                    intHandle = setInterval(function () {
                        _count++;
                        var elsTime = +(new Date()) - _clickTime;
                        if (_count >= 100 || elsTime > 3000) {clearInterval(intHandle);
                            check(elsTime);
                        }
                    }, 20);
                }
                checkOpen(function (opened) {
                    // APP 没有打开成功  并且开启自动跳转到下载页
                    if (opened === 0) {location.href = universalLink}
                });
            }
            ue.trackEventDownload();});
    };

    ue.init = function () {ue.openApp();
    };
})(window);
$(function () {ue.init();
})

调起 APP 在不同平台用不同的方式，主要就分 3 个

* URI Scheme
* universal Link
* Android App Links

现在还是有很多第三方（例如魔窗）来协助你处理这个事情，通过接入他们的 SDK 和客户端代码来处理，但是万变不离其宗，所有的第三方也离不开这 3 种方式。

URI Scheme:
- URI Scheme 是 iOS，Android 平台都支持，只需要原生 APP 开发时注册 scheme，用户点击到此类链接时，会自动唤醒 APP，借助于 URL Router 机制，则还可以跳转至指定页面。
- <scheme name> : <hierarchical part> [? <query>] [# <fragment>]
  - <scheme name>：是 scheme 的名称，代表着协议名称。
  - <hierarchical part>：它包含 authority 和 path。
  - <query>：可选项目，隔开或 & 隔开的键值对 <key>=<value>
  - <fragmentg>：可选项目包，其它额外的标识信息

例如：

git://github.com/user/project-name.git
ftp://user1:1234@地址
musically://musical?id=xxxx&key=xxxx

universal Link:
- iOS9 后推出的一项功能，通用链接，对于前端即访问一个 https 的 url, 如果这个 url 带有你提交给开发平台的配置文件中匹配规则的内容，iOS 系统会去尝试打开你的 app，如果打不开，系统就会在浏览器中转向你要访问的链接。
- universal Link 工作方式如下：
  1. 访问 web link
  2. iOS 访问 https://xxxxxxx/apple-app-sit… 并解析，获取文件中的信息 (App 的 Team ID 和 Bundle ID)
  3. 通过 Bundle ID 检查本地是否存在对应 app，和检查 PATH 信息等，如果有 app 打开 app，如果没有则跳转对应 web link(可通过代码实现跳去 app Stroe)
Android App Links:
- 在 2015 年的 Google I/ O 大会上，Android M 宣布了一个新特性：App Links 让用户在点击一个普通 web 链接的时候可以打开指定 APP 的指定页面，前提是这个 APP 已经安装并且经过了验证，否则会显示一个打开确认选项的弹出框，只支持 Android M 以上系统。
- 简单的说就是建立 APP 和某个链接的关联，避免系统在处理该类型链接时弹出选择框。弹框最常见的就是浏览器打开时的选择框。弹出选择框是应用注册了相应 scheme，applinks 的作用是避免在打开自己域名的链接时弹出选择（前提是注册了相应 scheme），可以实现直接打开自己关联的 app。

URI Scheme 的兼容性是最高，在使用的过程中，会发现有很多限制：

当要被唤起的 app 没有安装时，这个链接就会出错。在国内非常杂乱的浏览器中，会出错的现象会很多种类型。
当注册有多个 scheme 相同的时候，目前没有办法区分。
不支持从其他 app 中的 UIWebView 中跳转到目标 app

也就因为会有这些原因，apple 和 android 都出现了自己第二套解决方案。

从链接上看来，是一个 web link，所以也就解决了当没有 app 时，跳转也不会出现报错，所以相对 Scheme 优势就提现出来了。

当已经安装 app，不需要加载任何 web 页面，app 就会立即启动；app 没有安装，就会跳去对应的 web link。
universal Link 是从服务器上查询是哪个 app 需要被打开，所以不会存在冲突问题
universal Link 支持从其他 app 中的 UIWebView 中跳转到目标 app
隐私性，提供 universal Link 给别的 app 进行 app 间的交流，然而对方并不能够用这个方法去检测你的 app 是否被安装。

当然 universal Link 也不是十全十美的, 缺陷也是存在的:

会记住用户的选择：在用户点击了 Universal link 之后，iOS 会去检测用户最近一次是选择了直接打开 app 还是打开网站。一旦用户点击了这个选项，他就会通过 safiri 打开你的网站。并且在之后的操作中，默认一直延续这个选择，除非用户从你的 webpage 上通过点击 Smart App Banner 上的 OPEN 按钮来打开。

差异不大。也是为了更好的提供调起 app 出现的 google 的方案。优点与 universal Link 差不多，缺点主要如下：

* 国内的支持相对较差，在有的浏览器或者手机 ROM 中并不能链接至 APP，而是在浏览器中打开了对应的链接。* 在询问是否用 APP 打开对应的链接时，如果选择了“取消”并且“记住选择”被勾上，那么下次你再次想链接至 APP 时就不会有任何反应

无论哪一种方式目前都没有解决几个问题：

如果设备上没有安装这个 app 的时候，安装完毕后，无法保留住此时用户停留的上下文。
因为 web 没有办法监听到 APP 是否安装，所以都需要通过一些手段来兼容调起 app 或者是去下载页

URI Scheme：
- 使用: 这种方式是当期使用最广泛，也是最简单的，但是需要 APP 支持 URI Scheme。
- 需要注意的内容 & 遇到的问题：

 其实使用 URI Scheme 部分前端没有太多可以排查的问题，会遇到的问题主要是两个部分。1. 在 android 的兼容性处理（国内的浏览器无力吐槽 ing），2. 当没有安装 app 的情况，URI Scheme 会有各种报错，也需要处理…

universal Link & app Links
- 使用：对于有 app 的用户，只是打开一个连接，但是需要注意的是需要考虑到没有 APP 的用户。(个人的解决方案：针对域名来判断，当域名为特定的 universal Link 的域名，则跳转去下载页面）
- 需要注意的内容 & 遇到的问题：
  1. apple-app-site-association 和 assetlinks.json 的配置
  2. 需要保证使用的链接跨域 (universal Link)
  3. 直接将 universal Link 贴入浏览器的 url 中不会生效
  4. window.onload 或者用户没有任何事件触发的情况下，universal Link 也不会生效

facebook 和 twitter 作为国外的两大信息聚合平台，对于在他们 app 中调起 app 也有自己的一套方式。
根据要求通过添加 META 头来处理打开 APP
facebook:

<meta property="fb:app_id" content="xxxxxx" />
<meta property="og:type" content="xxxx"/>
<meta property="og:title" content="xxx" />
<meta property="al:ios:url" content="{{uri scheme}}" />
<meta property="al:android:url" content="{{uri scheme}}" />
<meta property="al:ios:app_store_id" content="{{app_store_id}}" />
<meta property="al:ios:app_name" content="{{xxx}}" />
<meta property="al:android:app_name" content="{{xxx}}" />
<meta property="al:android:package" content="{{android:package}}" />

twitter:

<meta name="twitter:card" content="app" />
<meta name="twitter:site" content="xxxxx" />
<meta name="twitter:title" content="xxxxx" />
<meta name="twitter:description" content="xxxxxxx" />
<meta name="twitter:image" content="xxxx" />
<meta name="twitter:app:name:iphone" content="xxx">
<meta name="twitter:app:id:iphone" content="xxx">
<meta name="twitter:app:url:iphone" content="{{Scheme}}">
<meta name="twitter:app:name:ipad" content="xxx">
<meta name="twitter:app:id:ipad" content="xxx">
<meta name="twitter:app:url:ipad" content="{{Scheme}}">
<meta name="twitter:app:name:googleplay" content="xxx">
<meta name="twitter:app:id:googleplay" content="xxx">
<meta name="twitter:app:url:googleplay" content="{{Scheme}}">

从以上内容可以总结出：要做一个兼容性很好的方案，就需要考虑各种情况，在不同的情况适配不同的方案，比方说用户是在手机浏览器打开还是微信中打开，或者是在 pc 中打开，universal link 是否被关闭等，这就使代码实现变得复杂，且容易出错，且还有安卓平台机型众多、浏览器众多等导致的兼容问题。

如果觉得实现难度或者成本太高，你可以考虑使用第三方提供的服务，例如魔窗的 `mLink。具体请查看官网，在此不赘述。

scheme
- iOS 和 android 是否已经支持此 scheme
- js 处理兼容代码
universal Link (apple-app-site-association 官方文档)
- HTTPS 的域名
- iOS9 以上
- universal Link 是否跨域
- universal Link 的落地页是否是下载页面
- apple-app-site-association 配置在 host 的根目录和.well-known 下
  - 官方检测: apple-app-site-association 检测
- apple-app-site-association 会在第一次打开 app 或者更新 app 时候会去拉去, 所以确认是否更新了 apple-app-site-association 后没有更新过 app
- 检查 apple-app-site-association paths 大小写敏感支持通配符
- 该设备的用户选择了直接打开 app 还是打开网站，如果选择打开网站，需要通过 smart banner 重新启用
- 跳转处理是否是在用户事件中触发，而不是进入页面后直接触发
app links (android app links 官方文档)
- HTTPS 的域名
- 跳转后的落地页是否是下载页面
- assetlinks.json 配置在 host 的.well-known 下
  - 官方生成 / 检测: android app links 检测
facebook (facebook app link 官方文档)
- 将需要的 meta 头信息填充完毕
- 检测链接分享调试器 – Facebook for Developers , 确认分享链接中获取到了所需要的 meta 头
- 分享过的链接会有缓存，在检测中清楚缓存
- 如果 web 和 wap 链接一致，确认在 web 中也添加了相同的 meta 头，facebook 会默认从 web 中获取
twitter (Twitter app card 官方文档)
- 将需要的 meta 头信息填充完毕
- 检测链接 Twitter app card 检测
- 如果 web 和 wap 链接一致，确认在 web 中也添加了相同的 meta 头，facebook 会默认从 web 中获取

https://blog.branch.io/notice…

失效现象：
无法直接唤醒 app，而是直接跳转到 appStore，用户再点击【打开】。

解决方案：
iOS 开发可以配置通用链接让其【强制打开】，但是可能出现该错误提示框，这样给用户的体验反而更不好。

腾讯系封杀了除本厂及白名单 app 之外的所有 app 的唤醒功能。

webview 如何屏蔽 universal Link
apple-app-site-association 官方文档
apple-app-site-association 检测
android app links 官方文档
android app links 检测
facebook app link 官方文档
分享调试器 – Facebook for Developers
Twitter app card 官方文档
Twitter app card 检测

核心代码

业务逻辑

概念叙述

对比 / 优劣

1. URI Scheme

2. universal Link

3. app link 和 universal Link

使用 & 需要注意的内容

两大平台的特殊处理 (facebook & twitter)

第三方服务

使用 checkList(前端)

可能出现的 bug

1. iOS 11.2 universal link 失效的 bug：

2. QQ 浏览器、微信已屏蔽 scheme & universal link

参考资料链接

Just My Socks（注册教程内含优惠码）