[其它]浏览器判断是否安装APP

需求：
要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。




解决方案：
面临2个问题：一是如何唤起本地app，二是如何判断浏览器是否安装了对应app




1、 如何唤起本地app
方法一：ios与Android都支持一种叫做schema协议的链接


方法二：在ios中，还支持通过smart app banner来唤起app，即通过一个meta标签，在标签里带上app的信息，和打开后的行为，代码如下：

<meta name="apple-itunes-app" content="app-id=1023600494,  
app-argument=tigerbrokersusstock://com.tigerbrokers.usstock/post?postId=7125" />

1.1 通过schema唤醒app

url schema唤醒本地app的支持不是很友好，在浏览器当中都支持。但是在一些第三方应用的时候，比如微信，就会给拦截住，不让你直接访问本地的app。所以我们一般都会再做一个让用户通过浏览器打开页面的一个引导页。通过浏览器作为中转，来唤醒app。

用法
首先需要被唤醒的app 应该配置自己的url schema 他可以配置多个。来达到不同的业务需求，比如我们可以通过schema直接打开到app的首页。或者跳转到app内部的某一个页面。


根据具体的需求，我们需要配置url sehema 来唤醒app结构

这个一般都是安卓或者ios 工程师配置好，我们拿来用就可以


结构
例子：yc://ycbjie:8888/from?type=yangchong
let sechema =  "yc://ycbjie:8888/from?type=yangchong"
window.location.href = sechema




2. 如何判断本地是否安装了app

首先我们可以确认的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。


我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果500ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。


结合这个思路，我们来全局考虑一下这个需求应该采用什么样的方案来实现它。

clickDownload() {
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
      var loadDateTime = new Date();
      window.location = "...";//schema链接或者universal link
      window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
          var timeOutDateTime = new Date();
          if (timeOutDateTime - loadDateTime < 5000) {
              window.location = "..."; //ios下载地址  
          } else {
              window.close();
          }
      }, 500);
  } else if (navigator.userAgent.match(/android/i)) {
      var state = null;
      try {
          window.location = '...'; //schema链接或者universal link
          window.setTimeout(function() {
              window.location = "..."; //android下载地址  
          }, 500);
      } catch (e) {}
  }
},

使用 location.href 的同学可能会面临一个担忧，在有的浏览器中，当我们尝试激活schema link的时候，若本地没有安装app，则会跳转到一个浏览器默认的错误页面去了。因此大多数人采用的解决方案都是使用iframe。


但即使如何，还是有两个问题
问题1：当页面成功唤起app之后，我们再切换回来浏览器，发现跳转到了下载页面
问题2：IOS9+ 不支持通过iframe跳转（需要使用Universal links）


参考：
https://www.cnblogs.com/Rembang/p/13268415.html
https://blog.csdn.net/caseywei/article/details/128095154
https://blog.csdn.net/zzhongcy/article/details/118027770