浏览器中唤起native app || 跳转到应用商城下载（二） 之universal links

上一篇文章

在ios9出来之后，咱们发现愈来愈多的应用可以直接绕过微信的屏蔽，从其内置浏览器中直接唤起app。相比于经过弹窗提示让用户到浏览器中操做的方式，这无疑是极大的提升了用户体验与流量导入。所以，在ios上实现直接从微信中唤起app变得很是必要。

而其中的关键，就在于通用连接universal links：一种可以方便经过传统HTTP连接来启动app的方式，能够经过相同的网址打开网站和app。

对于ios开发者来讲，能够很轻松在网上找到很是多给本身的app配置universal links的教程文章，这里推荐 www.cocoachina.com/ios/2015090…

这篇文章的主要目的，就是从前端角度来聊一聊universal links的运用。

不管是Android仍是ios应用，都可以经过必定的方式捕获浏览器正在进行的url跳转。咱们知道在页面中一般有以下三种方式可以访问别的连接

• 经过html中的a标签

  <a href="universal links">action</a>复制代码

• 经过js的location方法

  window.location = 'universal links';复制代码

• 经过iframe标签，通常状况下咱们会经过js建立一个iframe标签，并经过设置iframe的src属性实现跳转

  var iframe = document.createElement('iframe');
  iframe.style.cssText = 'width: 0; height: 0';
  document.body.appendChild(iframe);
  iframe.src = 'universal links';复制代码

为了可以在js中控制跳转行为，咱们基本不会经过a标签的方式，而选择2，3种。不过比较头疼的是，并非全部手机版本的浏览器都可以毫无顾忌的使用这两种方式，好比在ios8中，听说他们ios开发经过一般使用的方式，没法捕获window.location的跳转，所以咱们得采用iframe的方式来实现唤起。而在Android上浏览器的表现就更加杂乱不一，所以若是想要兼顾全部的浏览器，从测试角度来讲，这是一个比较大的工做量。

而universal links若是可以实现从微信中直接唤起app，那么微信之外的浏览器的复杂场景咱们都不须要考虑了。所以这简直就是一件利国利民的好事，从开发到测试的工做量都大大下降。

读过上一篇文章的同窗应该知道，单单从浏览器层面，咱们没法精准的判断本地是否安装了app。这给咱们实现这一需求形成了很是多的困扰。而从ios9.2开始，针对universal links，有一个很是重要的改动，通俗来讲，就是必须经过访问不一样的url连接，咱们才能在微信中唤起本地app。

在上面咱们介绍过，universal links可以使用和访问普通网页同样的http连接，唤起咱们本身的app。好比咱们访问一个页面http://www.test.com/gold可以在浏览器中打开一个页面，而当咱们在手机浏览器中，经过上面的三种方式尝试访问一样的地址http://www.test.com/gold，只要本地安装了指定的app，就能够打开app中的对应页面。可是9.2的改动以后就不行了，在9.2以后，咱们必须使用2个不一样的域名，而且这2个域名指向同一个页面，咱们才可以在微信中唤起app。

若是咱们仅仅只是配置了一个域名，那么当咱们在微信中打开这个网页，而且在页面中访问自身时，页面仅仅至关于一次刷新，而app并不会被唤起。而点击在浏览器中打开时，会唤起app。

对于不了解的人来讲，这是一个深坑，而当咱们了解了其中的细节，那么咱们就可以利用这一点，完美的实现有则唤起，无则下载的需求。

假如咱们有一个app，demoAPP。咱们的ios同事已经配置好了universal links，2个域名分别为a.com, b.com。另外咱们有一个宣传页面，在浏览器中，a.com/activity与b.com/activity都可以访问该宣传页面。

为了规范统一，咱们规定将该宣传页面从demoAPP分享出来时，页面地址使用a.com/activity，而在当咱们想要唤起demoAPP时，使用b.com/activity.

另外，在实践中我发现以下特性，若是本地安装了demoAPP，那么a.com/activity中唤起app以后，不会发生任何变化。而若是本地没有安装demoAPP，页面会跳转到b.com/activity，当到了这个页面，咱们已经知道没法唤起，所以直接下载便可。

所以根据这个特性，咱们有了以下的实践方案

var openURL = {
    open: 'b.com/activity',
    down: 'downloadurl'
},
// 打开app的按钮
btn = document.querySelector('.open-app'),
curURL = window.location.href;
if (/b.com/ig.test(curURL)) {
    window.location = openURL.down;
    return;
}

btn.onclick(function() {
    window.location = 'b.com/activity';
})复制代码

是否是很简单！

固然在具体实现上，还有许多繁琐的细枝末节须要咱们一步一步去完善。这里只是提供了一个思路。从总体来讲，这个需求并非一个简单的任务，咱们须要后端同窗配置2套域名，须要ios同事配合，甚至还须要和产品不停的沟通，由于有一些确实没法实现的东西须要他们理解。

第三方

老实说，若是本身劳心劳力想要比较完善的实现这么个需求，真的吃力不讨好，须要配合的部门太多，耗时太多，最后的效果还并非很好，不少用户还对这种弹窗下载提示真的深恶痛绝。所以，经过第三方的解决方案无疑是最好的办法。

这里推荐2个第三方方案，具体的优点，实现与配置方式在他们网站中都有详细的讲解，若是真的有接到这个需求的同窗，强烈建议参考。固然，若是有数据隐私这方面的考虑的话，就仍是本身老老实实的作兼容吧，反正方案就是这2篇文章说的这些。

磨窗 www.magicwindow.cn/

deepshare deepshare.io/redirect-on…

我知道有的同窗会想吐槽，说了这么多，原来仍是第三方才是最佳方案，干吗不直接说得了！那么我只能说，这么想的同窗，确定不知道经验这个东西，在撕b上到底有多重要！！

最后！公众号求一波关注！！！！搜索isreact能够找到我