H5 唤起 APP的解决方案

H5 页面唤起APP或跳转到下载APP的某个链接地址。总结如下：

在 IOS 中， 系统版本在 8 以下时，可以监听页面的 pagehide / visibilitychange 事件。 系统版本大于 8 以后，可以使用 universal Link 或 URL scheme 进行跳转。

// IOS 的唤起

function vForIOS(urlScheme, storeURL, fallback, universalLink) {

    var tid = deferFallback(TIMEOUT_IOS, storeURL, fallback);

    if (parseInt(os.version, 10) < 8) {

        bindPagehideEvent(tid);

    } else {

        bindVisibilityChangeEvent(tid);

    }

    if (parseInt(os.version, 10) > 8 && os.name == 'iOS') {

        // 通过universalLink

        if (universalLink === undefined) {

            universalLink = urlScheme;

        } else {

            clearTimeout(tid);

        }

        vLocation(universalLink);

    } else {

        vIframe(urlScheme);

    }

}

在安卓中， 安卓版本 4.4.4 以上机型的安卓自带浏览器、chrome 浏览器，需要通过 intent 跳转 【详情请见 https://developer.chrome.com/multidevice/android/intents】，其他浏览器大多数可通过 url scheme 唤起。但由于唤起APP后浏览器并无回调事件，我们很难判断是否已成功拉起APP，比较通用的解决办法是判断计时器是否变慢，若APP启动浏览器最小化入后台将会导致计时器变慢，即为实际事件间隔大于理想时间间隔。若未变慢则判断为未成功拉起APP，则跳转至下载地址。此判断代码如下：

function deferFallback(timeout, storeURL, fallback) {

        var clickedAt = new Date().getTime();

        return setTimeout(function () {

            var now = new Date().getTime();

            if (isPageVisible() && now - clickedAt < timeout + INTERVAL) {

                fallback(storeURL);

            }

        }, timeout);

    }

安卓系统中，不同浏览器对唤起APP有严重的兼容性问题，主要处理方案有以下几种：

1. 通过改变 window.location.href
2. 通过创建 iframe 并为其 src 赋值
3. 通过 intent
4. 通过制造不可见 a 链接，并触发点击时间

// 打开页面的方式可能

    // 1. 通过改变location

    function vLocation(urlScheme) {

        window.location.href = urlScheme;

    }

    // 2. 通过ifreame

    function vIframe(urlScheme) {

        setTimeout(function () {

            var iframe = createHiddenIframe('appLauncher');

            iframe.src = urlScheme;

        }, 100);

    }

    // 3. 通过intent

    function vIntent(launchURI) {

        if (browser.name == 'Chrome') {

            move();

        } else {

            setTimeout(move, 100);

        }

 

        function move() {

            // window.top.location.href = launchURI;

            window.location.href = launchURI

        }

    }

    // 3. 通过添加出发alink

    function vAlink(launchURI) {

        var aLink = document.createElement("a");

        aLink.setAttribute("href", launchURI);

        aLink.style.display = "none";

        document.body.appendChild(aLink);

        var event = document.createEvent("HTMLEvents");

        event.initEvent("click", !1, !1);

        aLink.dispatchEvent(event)

    }

  

    // IOS 中的 可见性事件

    function bindPagehideEvent(tid) {

        window.addEventListener('pagehide', function clear() {

            if (isPageVisible()) {

                clearTimeout(tid);

                window.removeEventListener('pagehide', clear);

            }

        });

    }

 

    function bindVisibilityChangeEvent(tid) {

        document.addEventListener('visibilitychange', function clear() {

            if (isPageVisible()) {

                clearTimeout(tid);

                document.removeEventListener('visibilitychange', clear);

            }

        });

    }

 

    function isPageVisible() {

        var attrNames = ['hidden', 'webkitHidden'];

        for (var i = 0, len = attrNames.length; i < len; i++) {

            if (typeof document[attrNames[i]] !== 'undefined') {

                return !document[attrNames[i]];

            }

        }

        return true;

    }

已知的浏览器兼容问题：

1. 上述 chrome 和 Android Browser 可以使用 intent 的方式拉起 app
2. QQ 浏览器 无法正确判断计时器是否变慢
3. 微信浏览器 和 百度浏览器 无法唤起 app 除非加入其白名单
4. 安卓4.4.4以前的 UC浏览器无法正确识别为 【安卓系统】需要单独设置判断条件

另： 研究京东唤起APP的代码时，其对百度浏览器做了如下操作，但我们对此的尝试并为成功，如下为其代码, 希望对后续研究此项的同学有帮助 ：

function ai(aA) {

    var aD = ay(aA, true);

    var aB = aA.universalLinksUrl + "/ul/ul.action?" + aD;

    if (navigator.userAgent.indexOf("baidubrowser") >= 0) {

        window.location.href = aB

    } else {

        var az = document.createElement("a");

        az.setAttribute("href", aB);

        az.style.display = "none";

        document.body.appendChild(az);

        var aC = document.createEvent("HTMLEvents");

        aC.initEvent("click", !1, !1);

        az.dispatchEvent(aC)

    }

}