浏览器中唤起native app的探索过程

我只是一名小小的H5开发者

前段时间遇到一个小需求：当我和平常一样，打开了微信的互动有吾，想要进官网看下我的作品情况，毕竟要是又有人购买我的H5，那就是一笔收入了，更重要的是，自己的劳动成果被人肯定。这时候，发现有个客户，要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。

因为从来没有做过这个需求，因此这注定是一个苦逼的调研过程。

我最开始就面临2个问题：一是如何唤起本地app，二是如何判断浏览器是否安装了对应app。（因为有着不服输的逞能劲儿，我想一旦探索成果就可以在互吾开发者交流群，好好炫耀一番了。）

如何唤起本地app

首先，想要实现这个需求，肯定是必须要客户端同学的配合才行，因此我们不用知道所有的实现细节，我们从前端角度思考看这个问题，需要知道的一点是，ios与Android都支持一种叫做schema协议的链接。比如网易新闻客户端的协议为

当然，这个协议不需要我们前端去实现，我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键。

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

互吾开发者：浏览器中唤起native app的探索过程

我们还需要知道的一点是，大部分H5的营销推广，都和微信有着千丝万缕的关系，而微信里屏蔽了schema协议。除非你是微信的好基友之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。

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

很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。结合这个思路，我们来全局考虑一下这个需求应该采用什么样的方案来实现它。

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

测试了很多浏览器，没有发现过这种情况

后来观察了网易新闻，今日头条，YY等的实现方案，发现大家都采用的是iframe来实现。好吧，面对这种情况，只能屈服。

整理一下目前的思路，得到下面的解决方案

互吾开发者：浏览器中唤起native app的探索过程

想法很美好，现实很残酷。一测试，就发现简单的这样实现有许多的问题。

第一个问题在于，当页面成功唤起app之后，我们再切换回来浏览器，发现跳转到了下载页面。为了解决这个问题，发现各个公司都进行了不同方式的尝试。也是历经的很多折磨，发现了几个比较有用的事件。

pageshow：页面显示时触发，在load事件之后触发。需要将该事件绑定到window上才会触发

pagehide: 页面隐藏时触发

visibilitychange：页面隐藏没有在当前显示时触发，比如切换tab，也会触发该事件

document.hidden 当页面隐藏时，该值为true，显示时为false

由于各个浏览器的支持情况不同，我们需要将这些事件都给绑定上，即使这样，也不一定能够保证所有的浏览器都能够解决掉这个小问题，实在没办法的事情就不管了。（我就纳闷了，互吾平台的其他开发者，是怎么做到的呢？要不改天问下？）

因此需要扩充一下上面的方案，当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件

互吾开发者：浏览器中唤起native app的探索过程

而另外一个问题就是IOS9 下面的问题了。ios9的Safari，根本不支持通过iframe跳转到其他页面去。也就是说，在safari下，我的整体方案被全盘否决！

于是我就只能尝试使用location.href的方式，这个方式能够唤起app，但是有一个坑爹的问题，使用schema协议唤起app会有弹窗而不会直接跳转去app！甚至当本地没有app时，会被判断为链接无效，然后还有一个弹窗。

这个弹窗会造成什么问题呢？

如果用户不点确认按钮，根据上面的逻辑，这个时候就会发现页面会自动跳转到下载去了。而且无效的弹窗提示在用户体验上是不允许出现的。

好吧，继续扒别人的代码，看看别人是如何实现的。然后我又去观摩了其他公司的实现结果，发现网易新闻，今日头条都可以在ios直接从微信中唤起app。真是神奇了，可是今日头条在Android版微信上也没办法直接唤起的，他们在Android上都是直接到腾讯应用宝的下载里去。所以按道理来说这不是添加了白名单。

为了找到这个问题的解决方案，我在网易新闻的页面中扒出了他们的代码，并整理如下，添加了部分注释

互吾开发者：浏览器中唤起native app的探索过程

虽然有一些外部的引用，和一些搞不懂是干什么用的方法和变量，但是基本逻辑还是能够看明白。好像也没有什么特别的地方。研究了许久，看到了一个jsonp请求很奇特。

这是来干嘛用的？

于是费尽千辛万苦，搜索了很多文章，最终锁定了一个关键的名词 Universal links。如果我早知道这个名词，那么问题就不会变的那么束手无策。所以这个东西是什么呢？

记得，互动有吾微信公众号之前有发过了一篇文章，里面有说到：Apple为iOS 9发布了一个所谓的通用链接的深层链接特性，即Universal links。虽然它并不完美，但是这一发布，让数以千计的应用开发人员突然意识到自己的应用体验被打破。

Universal links，一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。

关于本文的这个问题，国内的论坛有许许多多的文章来解决，但是提到universal links的文章少之又少，而我想吐槽的是，我们的ios开发也尼玛不知道这个名词，搞什么鬼。他改变了用户体验的关键在于，微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。

这个时候我就发现，上面贴的网易新闻代码中的jsonp请求的内容，就是这个协议必须的一个叫做apple-app-site-association的JSON文件

互吾开发者：浏览器中唤起native app的探索过程

支持了这个协议之后，我们又可以通过iframe来唤起app了，因此基本逻辑就是这样了。

但是！并不是就没有坑了。

universal links还有一个大坑，就是如果想要通过universal links只在在微信中打开app，同一个页面我们还得使用不同的两个域名。这个特性虽然有点坑，但是通过这个特性却能够完美判断本地是否安装了你们的app。

比如我们正常访问当前页面的域名为A，对应的页面url为A ，而当我们点击按钮，需要打开app用到的域名为B，，对应的页面url为B 。A与B都被注册成为了对应app的universal links，A 与 B 都指向同一个页面。我们通过js判断，如果是通过B 访问的该页面，则直接跳去下载app。这样，当我们从A 通过点击访问B 时，如果universal links生效并且本地安装了对应的app，app会直接被打开。如果本地没有安装App，则会直接执行刚才B 中跳去下载的设定。

OK，这个问题，几乎所有的坑我都在上面说到了，如果想要做好兼容，就是一个针对每个坑做最优选择了，这是一个工作量的问题。

不过最终的调研结果是：没有完美的解决方案

就算是网易新闻，这个按钮在使用过程中也会有一些小bug，无法做到完美的状态。因为我们面临许多没办法解决的问题，比如无法真正意义上的判断本地是否安装了app，pageshow，pagehide并不是所有的浏览器都支持等。很多其他博客里面，什么计算时间差等方案，我花了很久的时间去研究这个方案，结果是：

根！本！没！有！用！

老实说，从微信中跳转到外部浏览器，并不是一个好的解决方案，这样会导致很多用户流失，每天在互吾找H5的商家那么多，相信他们也是不愿意看到这局面的，因此大部分互吾开发者都在ios上实现了universal links。

网易新闻的逻辑是，点击打开会跳转到一个下载页面，这个下载页面一加载完成就尝试打开app，如果打开了就直接跑到app里面去了，如果没有就在页面上有一个立即下载的按钮，按钮行只有下载处理。

这个问题就总结到这里，如果大家有更好的方案，欢迎回复我，与我沟通。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/3676.html

浏览器中唤起native app的探索过程

相关推荐

发表评论