打开APP或者去下载 Open or download

yuanoook
yuanoook 发布于 2016-11-09 12:35:07 浏览:334 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
目的
页面元素被点击时,检测是否已经安装app。如果已经安装,尝试打开。如果没有下载安装,提示下载或跳转下载页。

方式
用事件代理监听监听点击事件,检测到 a 标签被点击,判断href协议是否是 app_protocal,如果是,立即把 location.href 设置成下载链接。

原理
浏览器会首先会触发A标签默认行为【尝试打开新链接 -> 发现不是 http 和 https -> 调用系统行为 -> [系统发现app(从app返回/拒绝打开)/ 没有安装app] 】,然后触发事件冒泡。整个过程是串行的。注:app_protocal 是 http 和 https 时测试这个逻辑无效。

代码
/*
     在页面中使用场景
     <a href="hkjoybao://platformapi/xxxx"></a>
    下面代码包含附加逻辑:
            1.微信浏览器提示在浏览器中打开的逻辑,如无需要,直接去掉 beforeDownload
            2.客户端内部不做处理,通过判断 navigator.userAgent 中是否包含标识 app_ua_mark
*/
window.addEventListener('load',function(){
    openOrDownload('hkjoybao', 'http://huodong.hk515.com/hkdownload/index.php', {
        app_ua_mark: 'jiuyibao_version_',
        monitor_dom: document.body,
        beforeDownload: function() {     
            if (/MicroMessenger/.test(navigator.userAgent)) {
                showOpenWithBrowserTip();
                return false;
            } else {
                return true;
            }

            function showOpenWithBrowserTip() {
                if( !window.open_with_browser_tip ){
                    open_with_browser_tip = document.createElement('div');
                    open_with_browser_tip.setAttribute('style',"display:none;position:fixed;top:0;right:0;font-size:20px;color:white;text-align:right;width:100%;padding:20px;background:rgba(0,0,0,.5);");
                    open_with_browser_tip.setAttribute('onclick',"this.style.display='none';");
                    open_with_browser_tip.innerHTML = '在浏览器中打开 ↗';
                    document.body.appendChild(open_with_browser_tip);
                }
                open_with_browser_tip.style.display = 'block';
            }
        }
    });

    /*
        options: {
            app_ua_mark: <String>, //default: null
            monitor_dom: <DOM Object>, //default: document.body
            beforeDownload: <Function> //default: null, return false to reject
        }
    */

    function openOrDownload(app_protocal, download_url, options) {
        var is_in_app = (
            ( options && options.app_ua_mark )
            ? (new RegExp(options.app_ua_mark.replace('.','\\.'))).test(navigator.userAgent) 
            : false
        );

        !is_in_app && ((options && options.monitor_dom) || document.body).addEventListener('click',function(e) {

            var link = e.target;
            while( link && link.tagName!='A' ){
                link = link.parentElement;
            }
        
            if (link && (new RegExp('^'+ app_protocal +'\\:\\/\\/')).test(link.href)) {
                if( options && options.beforeDownload && !options.beforeDownload() ){
                    return;
                }
                location.href = download_url;
            }
        })
    }
});



IOS10 和部分安卓系统,因为系统安全设置等原因。即使安装了 app, 也有可能判定为没有安装 :(

对比
线上能搜集到的方案,对此类情景的处理方式大致相同。
尝试打开,如果成功->场景切换到目标app,如果失败/拒绝或者从app返回,提示下载或者跳转到下载页面。
本例代码测试页面:
打开APP或者去下载 Open or download
淘宝移动端页面:
打开APP或者去下载 Open or download

参考
http://stackoverflow.com/questions/29773614/launch-app-from-link-if-no-app-then-go-to-download-app-from-web
标签:
z
给个赞 1 人点赞
收藏 2 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新