需求背景

在H5页面上进行app引流。点击某个按钮时，判断用户是否已经安装某APP，若已安装，则直接打开APP；若未安装，则开始下载APP;

实际上，JS 是没有判断 APP 是否安装的方法的，那么我们只能想办法来解决这个问题了。

android端处理方案

在android端大多数是通过scheme命令直接打开APP。

首先定义好你的scheme命令已经app下载地址，如下：

let schemeUrl = 'com.***.cn://***:8080/loadapp';
let downloadUrl = 'https://***.com/appdownload';

然后点击按钮时直接重定向至scheme地址。

接下来如果用户已经安装了就会直接打开APP，浏览器会被隐藏，那么当前页面会失去焦点，以此来进行判断。
完整代码如下：

window.location.href = schemeUrl ;
// 设置2秒的定时下载任务，2秒之后下载app
setTimeout(function () {
   let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden;
   if (typeof hidden !== "undefined" && hidden === true) {
       return;
   }
   window.location.href = downloadUrl;
 }, 2000);

iOS端处理方案

1.在 xcode 中开启 Associated Domains 服务

H5 ios判断是否安装app h5判断手机是否安装app_html


2.在 Capabilities -> Associated Domains 添加跳转域名格式为 applinks:universal-link.example.com

H5 ios判断是否安装app h5判断手机是否安装app_ci_02


3.准备两个域名（通用链接域名和当前域名一样，IOS 会默认判断在当前页面打开一个网页）一个是页面部署域名 h5.example.com，一个用来制作通用链接 universal-link.example.com。

4.在 universal-link.example.com 所对应的服务器更目录创建 apple-app-site-association 文件，内容为

{
 "applinks": {
     "apps": [],
     "details": [
         {
             "appID": "苹果对每个APP给定的唯一ID",
             "paths": [ "/open-app"]
         }
     ]
 }
}

配置好一定要确保该文件可以正常访问

5.同样是在 universal-link.example.com 服务器里启动一个 nginx，用来处理当手机没安装 app 时跳转到 APP store 的操作

server {
  location /open-app/ {
      rewrite ^  https://apps.apple.com/cn/app/xxxxx;
  }
}

接下来就可以在H5中将跳转链接改为universal-link.example.com/open-app，如下：

window.location.href = 'universal-link.example.com/open-app';

注意：
1.用户点击跳转按钮，首先判断需要跳转的 url 是否和当前页面的 url 为同一域名，如果不是才能触发 universal-link 的方式跳转。
2.iOS 系统必须大于 9。
3.unisersal-link 的域名必须为 https。

点击之后系统的流程：
1.用户安装 app 后系统会检索是否开启 Associated Domains，如果开启去下载 apple-app-site-association 文件，然后对此 APP 进行标注。
2.用户点击跳转链接时系统会先对已标注的 APP 进行检索，如果匹配则直接打开 APP。
3.不匹配则重定向到跳转链接，此时跳转链接服务器的 nginx 对 path 进行匹配，成功则再次重定向到 app store 的链接。