【前端记-2】都9102年了，你还不知道怎么唤醒APP吗

今天的富婆又来营业了，今天给你们分享的是在H5页面唤醒APP。

背景

通常公司都有本身的app，而app是须要不断有新用户涌入才能持续运营，达到不错的收入。就须要使用这种方式进行引入新的用户到native app中。

一些内容在网页端体验很差，或者一些功能须要app内才能实现，以及能留住用户，就须要将用户引入app中。

点击网页按钮打开app并自动跳到相应页面。

首先，这个方法仅适用于移动端h5页面，通常的智能机都是可使用的。这里使用的是es5的代码模式，容易理解。

此次采用对话的形式阐述这个问题：

二狗：富婆，我最近有个需求，网页端用户点击能够打开app,若是用户没有安装app,点击后就会跳转下载页，这个有什么办法能够实现啊？

富婆：办法是有的，不过不是前端检测有没有安装app，会用到浏览器的一个特性来处理这个问题，想不想听啊

二狗：快点说吧，别墨迹了，给你买最爱的山竹吃，

富婆：一言为定哦，听我细细道来

咱们来看看如何使用移动端浏览器的某个特性：

网页端经过访问app协议打开，其实利用的是app的url scheme方式。

若是有安装app，那么协议请求便会被app检测到。app打开期间，app界面会覆盖h5网页。因此访问打开app地址放在下载后面延迟执行，用户就看不到下载的跳转了。

若是未安装app，那协议请求就不会有任何效果。便会继续执行，直到跳转页面下载。

狗子：原来如此，用的是这种方法啊，实际上打开app期间，浏览器仍是跳转去了下载页，知识用户看不到而已。

富婆：哈哈，是这样的

狗子：那具体能够怎么实现呢？

富婆：嗯，那咱们具体看下

首先要经过UA判断当前浏览器UA 并转大写。用来分别针对安卓和ios机型作2种不同的处理。

根据UA判断的安卓仍是ios机型，分别作处理。

1.安卓设备：

经过隐藏iframe方式实现。iframe中请求协议启动地址，建立iframe须要时间，延迟一点时间，将iframe加入dom，产生请求。

若是app已安装，浏览器就会弹出一个提示框，问用户是否启动app。

若是未安装，浏览器等待一秒后就会去下载。

之因此使用iframe，为了防止location跳转后，js请求中断，跳入空白页。

代码中的Data.now()-t <1200，只因此是1200，其实也是一个估计值，为了大部分解决一些已经安装的app，1秒后仍是会跳转下载。由于打开app的瞬间，浏览器界面被app界面覆盖。但js未中止执行，延迟后仍是会在后台打开下载页，只是被遮挡了。

2.IOS设备：

首先，ios浏览器已经不支持再使用iframe了，因此上面的方式不适合用在ios上。

所以，这里只能采用location的方式。

若是安装了app，ios浏览器打开app协议前就会弹出个框，提示是否打开。

若是没有安装，就不会弹出这个提示。

富婆：怎么样，懂了吗？

狗子：嗯，明白了，给你买山竹去，不过只能吃一个哦，由于吃掉一个山竹，世界上就会少一个猫爪爪哦。

富婆：。。。。