浏览器内唤醒APP趋于完美的解决方案

Open App.png

老大让研究一个新功能，H5页面内点击唤醒APP，开始了艰苦的长途跋涉，一步一个坑！！！
1、该如何唤醒APP；
2、如何检测是否有APP；
看看前辈们是怎么做的，唤醒APP，研究发现，可以通过类似于url的形式跳转来唤醒APP，在原生中被命名为schema协议，

taobao://m.taobao.com   //淘宝的唤醒地址

咦，手机上有淘宝，地址也配好了，走起试一下（安卓），打开了，以为全世界都亮了，才发现只是一点星星之火，借鉴前辈们的解决方案，发现不能检测到手机内有没有安装APP，唤醒存在各种兼容性问题，主流的使用两种方法，核心思想是点击唤醒按钮，进行跳转，如果能进行跳转则跳转，否则跳转到下载页面。
1、动态创建iframe标签 （安卓解决方案）

var ifa = document.creatElement('iframe');
ifa.src = url;                              //APP的schema协议
ifa.style.display = 'none';
setTimeout(function(){
  document.body.removeChild(ifa);
  window.location.href = 'download.html'    //APP下载页
},1000)

通过动态生成iframe标签的这种方案，在ios9+里没有响应；
2、window.location.href跳转 （IOS解决方案）

window.location.href = url;                 //APP的schema协议
setTimeout(function(){
  window.location.href = 'download.html'    //APP下载页
},2000)

IOS系统上安装APP，提示弹框，打开APP，当手机里未下载APP，safari会提示错误链接，默认2秒后跳转下载页（系统弹框无法避免）；
当切换到app返回到H5页面发现仍然跳转到了下载页面，该怎么办
visibilitychange H5新出的接口 判断页面状态 主要是为了游戏开发人员，在我们玩游戏的过程中，我们会因为信息、电话等问题退出游戏页面，使其进入后台，这个时候判断进入此状态，暂停游戏。目前除了safari不支持，其他浏览器都支持。

https://developer.mozilla.org/zh-CN/docs/Web/Events/visibilitychange API文档

document.addEventListener('visibilitychange webkitvisibilitychange',function(){
  var tag = document.hidden || document.webkitHidden;
  tag ? clearTimeout(timer):'';
})

window.onpagehide = function(){
  clearTimeout(timer);
}

微信内不能唤醒APP的，微信将schema协议进行屏蔽，只对合作伙伴进行白名单开放.

---

写的不好的地方还望大家及时反馈与纠正，本着共同学习与进步宗旨不断前进！！！