[前端] H5页检测手机是否安装app 相关流程

82
近期公司需要针对分享流程进行优化,其中一点就是前端H5检测是否安装应用,来进行不同的判断(下载或直接跳转到app中)。原理很简单:创建一个iframe去打开uri。如果打开app成功网页进入后台,再切换回来时间会超过2.5s。利用时间去检测。下面来看具体实现过程:

你可能会遇到的问题

  • 什么是uri,获取uri需要哪些帮助?
  • 安卓中应用切换到后台, 计时器仍会不断运行有什么解决方法?
  • 微信中不支持第三方uri,下载应用。怎么解决来完成跳转到自身app。
  • 补充 如果uri跳转的是webview页的话document并没有被隐藏,判断会可能失效

都会在文中找到答案。

uri获取

这里的uri,指得就是通过 Url scheme 来实现的H5与安卓、苹果应用之间的跳转链接。

我们需要找到客户端的同事,来获取如下格式的链接。

xx://'跳转页面'/'携带参数'
这里给大家简单解释下url scheme。
url 就是我们平常理解的链接。
scheme 是指url链接中的最初位置,就是上边链接中 ‘xx’的位置。
详细介绍可以看这里:使用url scheme详解

用这个链接我们可以跳转到 应用中的某个页面,并可以携带一定的参数。这个是我们实现这个功能的前提哟。

具体实现

第一步:通过iframe打开App
Android平台则各个app厂商差异很大,比如Chrome从25及以后就不再支持通过js触发(非用户点击),所以这里使用iframe src地址等来触发scheme。
    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';
第二步: 判断是否安装某应用
原理:若通过url scheme 打开app成功,那么当前h5会进入后台,通过计时器会有明显延迟。利用时间来判断。
    //检查app是否打开
    function checkOpen(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);
    }
注意:
  • 由于安卓手机,页面进入后台,定时器setTimeout仍会不断运行,所以这里使用setInterval,较小间隔时间重复多次。来根据累计时间判断。
  • cb为回调函数,根据返回0 or 1来判断是否安装。
  • document.hidden对大于4.4webview支持很好,为页面可见性api。
第三步:微信中实现打开or下载应用效果
这里使用的是应用宝微链接实现。
 if (callback) {
      //客户端检测微信直接跳应用宝链接
      var browser = BrowserInfo();
      //使用微链接
      var encodeUri = encodeURIComponent('你的uri');

      if (browser.isWeixin) {
        window.location.href = '你的微链url&android_schema='+encodeUri;
      
      }else{
        checkOpen(function(opened){
            callback && callback(opened);
        });
     
      }
    }
注意点:
  • 微链接是应用宝提供的,可以在后台获取。
  • 使用微链接必须做encodeURIComponent转义。
  • 链接地址在微链接后拼接一个android_schema参数加你的uri。
完整函数
export const openApp = function(openUrl, callback) {
    //检查app是否打开
    function checkOpen(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);
    }
   
    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';

    if (callback) {
      //客户端检测微信直接跳应用宝链接
      var browser = BrowserInfo();
      //使用微链接
      var encodeUri = encodeURIComponent(openUrl);

      if (browser.isWeixin) {
        window.location.href = '你的微链url&android_schema='+encodeUri;
      }else{
        checkOpen(function(opened){
            callback && callback(opened);
        });
     
      }
    }
    
    document.body.appendChild(ifr);      
    setTimeout(function() {
        document.body.removeChild(ifr);
    }, 2000);  

}
其他
函数中调用的BrowserInfo是一个简单的客户端检测。具体如下:
/**
 * 客户端检测
 */
export const BrowserInfo = function() {
  var json = {
    userAgent: navigator.userAgent.toLowerCase(),
    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
  }
  
  return json;
}
回调函数的使用
页面中可以通过传递回调函数,来获取返回值;并通过是否传这个参数来做进入页面检测。

你可能感兴趣的

27 条评论
6K · 2017年04月26日

iOS 9+ 已经屏蔽 iframe 了。

+3 回复

0

因为之前大部分针对安卓用户。ios9实测通过这种方法,确实无法唤醒。你可以使用 Universal Links。或者使用内置广告条的方式(通过meta)。感谢评论:)

sunsmell 作者 · 2017年04月26日
0

Universal Link 有用,内置广告条指的是?

6K · 2017年04月27日
被折叠的记忆 · 2018年03月23日

你好,关于这里“‘微链接是应用宝提供的,可以在后台获取。’”,这个是由后台人员提供的吗?如果不是,自己改如何拿到APP的微链接,

+1 回复

0

微链接是应用宝后台提供的,我们把应用在应用宝上提交。会获取到。可以咨询公司的市场等获取

sunsmell 作者 · 2018年03月23日
0

我这边有一个需求,就是要在移动端网页判断手机是否安装了淘宝app,如果安装了,这跳到淘宝,如果没有安装淘宝app,就跳到淘宝网页,所以按你这篇文章,我得要获取淘宝的微链接才行。

被折叠的记忆 · 2018年03月23日
0

@被折叠的记忆 微链接在这里是为了解决在微信端无法下载应用的问题。如果跳淘宝的话你需要淘宝的uri.

sunsmell 作者 · 2018年03月23日
Awzs · 2017年05月11日

很好,不错!

回复

0

相互学习哈~~

sunsmell 作者 · 2017年05月11日
心晴 · 2018年01月08日

亲 有完整的demo么

回复

0

亲,可以看那个完整函数。uri需要客户端提供。

sunsmell 作者 · 2018年01月09日
0

但是没有看到你那个 cb();在什么地方定义的

心晴 · 2018年01月09日
0

@心晴 看checkOpen调用那里,我传了一个匿名函数 ,相当于是一个回调函数,来拿有无这个应用的状态。openApp不是传入了两个参数吗,第二个就是那个回调函数。你在另一个位置用此函数名接收就能拿到状态了

sunsmell 作者 · 2018年01月10日
winly · 2018年05月23日

这样的写法不是很好,在ios下,如果没安装app,可能会提示链接无效的问题,体验不好

回复

0

把scheme放到a标签里,通过a标签去打开,而不是通过window.location.href打开,就可以解决这个问题。但是我碰到了另一个问题,就是时间,作者写的3000ms,但是实测过程中,elsTime > 3000 永远检测到未安装app,只有修改为2000时,才能检测到安装了app,请问这是为什么呢?

盐酥鸡加甘梅粉 · 2018年05月25日
0

没看到评论说ios9+不支持iframe修改src的方式了。。。可能是这个原因。。

盐酥鸡加甘梅粉 · 2018年05月25日
SimplifyLawyer · 2018年05月23日

不错

回复

0

谢谢

sunsmell 作者 · 2018年05月23日
Weijuer · 3月7日

笑而不语,真正覆盖面广的能用的demo呢?

回复

0

这个文有点久了,可以作为参考。但是真正适合自己的业务代码,肯定是针对不同情况自己去写的。如果你有问题,可以提出来大家帮忙解决。

sunsmell 作者 · 3月8日
1

传说中伸手党的理直气壮

小太阳 · 3月8日
载入中...