H5唤起APP客户端

一、唤起APP的方案

当前主要有三种打开APP的渠道：流量APP封装渠道，原生的打开渠道以及一些奇技淫巧。

二、流量APP封装渠道

微信、手Q和微博等流量入口为了保证流量不流失，对iOS和Android原生的唤起方案做了屏蔽和封装。在这些APP中，使用原生唤起APP方案是无效的，只能用他们的方案或者位于白名单中的APP才能通过H5的唤起APP。

如果是腾讯系APP，或者在白名单中肯定是可以的！微博，手机百度等APP也是白名单的打开方式，平常用的不多，这里不做赘述。

三、原生渠道

1、 Schema

Schema是一种页面内跳转协议，主要有以下几部分组成[1]

     行为(应用的某个功能)
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

• path：代表指定要跳转的页面。

• query：表示要传递的参数。

• URLScheme方法的优点是实现简单，但是它存在以下两个缺点。

缺点1：微信、微博、手百禁止大多数App的Scheme;

缺点2：H5页面在试图打开应用程序时，会弹出一个提示框“要打开某某应用程序”;

Scheme：表示URL中最初始的位置，也就是：//之前的那个字符，可以使用Scheme查找相应的App。比如淘宝的Scheme就是taobao，支付宝的Scheme是alipay，新浪微博的Scheme是sinaweibo。

但是在Chrome25之后，iOS9以后，Android和iOS原生都不再支持这种协议，转而转变为新的方案App Link和Universal Link。

对比起这种方案，Schema不能判断出是否打开APP成功，也就不能针对没有打开APP做一些处理（只能通过hack的手段，通过判断页面是否可见来达到这一点）。但是，Schema现在在除原生以外各大移动端浏览器上（如QQ浏览器，Chrome浏览器等）都有不错的支持，而且使用schema不用客户端做额外的处理，做一些简单的逻辑还是可以用的。

具体实现方式：

这个方案基本上就是针对微信、qq内置浏览器，qq浏览器等之外的其余浏览器，从native那边要一个scheme ，然后放在a标签里或者location.href跳一下就行了

用一个iframe去做的一个跳页，有的话唤起scheme没有的话，会触发定时器跳到下载地址。但是这个方式在ios里面，在没有app的时候会遇到两次提示；

 var openApp = function (src) {
        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        const ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        var poenTime = +new Date()
        window.setTimeout(() => {
          document.body.removeChild(ifr);
          if ((+new Date()-openTime>2500)){
            window.location = 'APP Store下载的地址 '
          }
        }, 600);
      };

2 Universal Link

Universal Link是iOS开发的一种无缝链接APP和Web的方式。当访问一个链接时，如果安装了APP，那么直接跳转APP的相应页面，如果没有安装APP，则跳转相应的H5页面。不过我们可以利用它的这种特性来唤起APP。

Universal Link有几个缺陷：

• 要唤起的APP要做相应的支持
• 当前的页面和唤起的域名一定要跨域才可以
• 必须是Https

window.location.href ="APP给的Universal Link"

这是iOS9推出的一项功能，如果你的应用支持Universal Links(通用链接)，那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使用scheme。

解决方案：

1、通过右上角的浏览器，引导用户在浏览器中打开H5页面，可以直接唤醒App。这种方法的好处是浏览器对URLScheme没有限制，缺点是增加了用户右上角打开浏览器的步骤。

2、另一个解决方案，就是访问腾讯应用宝，通过"应用宝"来唤醒App或跳至App下载页面。这种方法的优点是无需用户从浏览器中打开，即使不在微信白名单中也可以直接使用App。

不利之处是此方式必须依赖腾讯应用宝，如果用户没有安装应用宝，则唤醒方式将失效，微信将引导用户先去安装应用宝。
 

3 APP Link

APP Link的初衷和Universal Link一致，都是为了给用户提供无缝的用户体验——如果安装了APP则跳转APP，没有安装APP就跳转相应页面，因此，我们也可以用它来做唤起APP。同样的，它也需要APP做相应的设置。

不过APP Link是Android上提供的方案，它和Universal Link不同的是：不需要使用https协议