工作-H5活动页唤起APP

背景

最近做了一个618活动页，当用户点击图片的时候，如果本地有APP，唤起本地APP；若没有，则跳转到app store下载。

参考了很多文档，因为安卓和苹果以及各个浏览器还是有很大区别的。针对此次情景总结如下：

安卓&iOS

采用的是通过一段时间内，监听当前页面是否隐藏，如果隐藏了，就说明跳转成功了。PS：因为没有现成的API可以知道是否用户本地有APP，大家有什么好办法，欢迎说出来～～～

// 点击图片唤起APP
    poster.onclick = function () {
        const isAndroid = /android|adr/gi.test(window.navigator.userAgent);
        let url = '客户端提供的url';
        // 默认打开本地APP 
        if (isAndroid) {
            callApp(url,1500).then(() => {
                console.log('唤起成功')
            }).catch(() => {
                const downUrl = '下载安卓App的地址'
                window.location.href = downUrl;
            });      
        } else {
            const downUrl = 'app store中App的地址'
            window.location.href = downUrl;
        }
    }
           

function callApp(schema, timeOut) {
        let timer, start = new Date().getTime();
        return new Promise((resolve, reject) => {
        	// 打开本地app
            window.location.href = schema;
            // 监听是否隐藏
            window.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'hidden') {
                	// 说明本地有App
                    clearTimeout(timer);
                    return resolve();
                }
            });
            // 定时器判断
            timer = setTimeout(() => {
                let end = new Date().getTime();
                if (end - start > timeOut + 1000) {
                    clearTimeout(timer);
                    return resolve();
                } else {
                    return reject();
                };
            }, timeOut);
        });
    };
           

注意的点

因为我们只可以通过打开本地app的方式才能知道用户是否已经下载了app，但是当用户本地没有app的时候，iOS默认safari浏览器会有一个默认弹窗

我是真的阻止不掉这里，如果大家有什么好办法，欢迎大家指出来～～

所以我采用的就是直接跳转到app store，通过app store来打开它。