h5 网页唤醒app 常见解决方案

 

 

目前h5 唤醒 app 网上有很多方法， 几乎没有完美的方法， 找到一个简单的方法

URL Scheme —— 唤端媒介

这种方法简单，粗暴，a 链接 即可跳转，与app 协定链接，链接的格式为  

[scheme]://[host]/[path]?[query]

    
    


打开应用

这样的话 有个问题  怎么检测手机有没有安装app 呢？ 需求是 有则打开， 无则下载，我们公司之前离职的前端是这么做的，无论唤醒成功失败，都跳转下载，这样导致打开app 后 又弹出下载页面，体验非常糟糕 

那究竟怎么检测手机有没有安装app 呢？ 这我找到了一个H5 特性的一个方法

在JavaScript中判断页面是否进入后台来判断打开成功。Html5提供了下列事件和属性可以利用：

• pagehide : 页面隐藏时触发
• visibilitychange : 页面隐藏没有在当前显示时触发(切换tab也会触发该事件)
• document.hidden ： 当页面隐藏时，该值为true，显示时为false

上面这些事件或者属性并不是所有浏览器都支持。下面是一个给出为id为openBtn 的按钮添加打开scheme或者下载事件的例子，但对于Android 4.4版本以下则不支持

于是好用的方法来了，直接复制可用。

  var downloader, 
    scheme = 'luwei://',  // 需要打开的app scheme 地址
    iosDownload='http://xxx.com';  // 如果打开scheme失效的app下载地址
    andDownload = 'http://xxx.com';
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

// 给 id 为 openBtn 的按钮添加点击事件处理函数
    document.getElementById('openBtn').onclick = function () {
        window.location.href = scheme;  // 尝试打开 scheme 
 
        // 设置3秒的定时下载任务，3秒之后下载app
        downloader = setTimeout(function(){
            if(isAndroid) {
                window.location.href = andDownload;
            }
            if(isIOS) {
                window.location.href = iosDownload;
            }
          
        }, 3000);
    };
 
    document.addEventListener('visibilitychange webkitvisibilitychange', function () {
        // 如果页面隐藏，推测打开scheme成功，清除下载任务
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide', function() {
        clearTimeout(downloader);
    });

这样就可以了，有些浏览器还是会有点问题 的