关于前端:H5如何实现唤起APP

写过 hybrid 的同学，想必都会遇到这样的需要，如果用户装置了本人的 APP，就关上 APP 或跳转到 APP 内某个页面，如果没装置则疏导用户到对应页面或利用商店下载。这里就波及到了 H5 与 Native 之间的交互，为什么 H5 可能唤起 APP 并且跳转到对应的页面？

就算你没写过想必也体验过，最常见的就是抖音外面的一些广告，如果你点击了广告，他判断你手机装了对应 APP，那他就会去关上那个 APP，如果没装置，他会帮你跳转到利用商店去下载，这个还算人性化一点的，有些间接后盾给你去下载，你齐全无感知。

哈哈，是不是感觉这种技术很神奇，明天咱们就一起来看看它是如何实现的～

如果这篇文章有帮忙到你，❤️关注 + 点赞❤️激励一下作者，文章公众号首发，关注 前端南玖 第一工夫获取最新文章～

实现之前咱们先简略体验一下什么是唤端

从上图中，咱们能够看到在浏览器中咱们点击关上知乎，零碎会提醒咱们是否在知乎中关上，当咱们点击关上时，知乎就被关上了，这就是一个简略的唤端体验。

有了这项技术咱们就能够实现 H5 唤起 APP 利用了，现阶段的引流形式大都得益于这种技术，比方广告投放、用户拉新、引流等。

体验过后，咱们就来聊一聊它的实现技术是怎么的，唤端技术咱们也称之为 deep link 技术。当然，不同平台的实现形式有些不同，个别常见的有这几种，别离是：

URL Scheme（通用）
Universal Link（iOS）
App Link、Chrome Intents（android）

这种形式是一种比拟通用的技术，各平台的兼容性也很好，它个别由 协定名、门路、参数 组成。这个个别是由 Native 开发的同学提供，咱们前端同学再拿到这个 scheme 之后，就能够用来关上 APP 或 APP 内的某个页面了。

[scheme:][//authority][path][?query][#fragment]

APP	微信	支付宝	淘宝	QQ	知乎
URL Scheme	weixin://	alipay://	taobao://	mqq://	zhihu://

罕用的有以下这几种形式

间接通过 window.location.href 跳转

window.location.href = 'zhihu://'

通过 iframe 跳转

const iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'zhihu://'
document.body.appendChild(iframe)

间接应用 a 标签进行跳转
通过 js bridge 来关上

window.miduBridge.call('openAppByRouter', {url: 'zhihu://'})

当用户唤起 APP 失败时，咱们心愿能够疏导用户去进行下载。那么咱们怎么能力晓得以后 APP 是否胜利唤起呢？

咱们能够监听以后页面的 visibilitychange 事件，如果页面暗藏，则示意唤端胜利，否则唤端失败，跳转到利用商店。

OK，咱们尝试来实现一下：

首先我手机上并没有装置腾讯微博，所以也就无奈唤起，咱们让他跳到利用商店对应的利用下载页，这里就用淘宝的下载页来代替一下～

<template>
  <div class="open_app">
      <div class="open_app_title"> 前端南玖唤端测试 Demo</div>
      <div class="open_btn" @click="open"> 关上腾讯微博 </div>
  </div>
</template>

<script>
let timer
export default {
    name: 'openApp',
    methods: {watchVisibility() {window.addEventListener('visibilitychange', () => {
                // 监听页面 visibility
                if(document.hidden) {
                    // 如果页面暗藏了，则示意唤起胜利，这时候须要革除下载定时器
                    clearTimeout(timer)
                }
            })
        },
        open() {timer = setTimeout(() => {
              // 没找到腾讯微博的下载页，这里临时以淘宝下载页代替
                window.location.href = 'http://apps.apple.com/cn/app/id387682726'
            }, 3000)
            window.location.href = 'TencentWeibo://'
        }
    }
}
</script>

<style lang="less">
.open_app_title {font-size: (20/@rem);
}
.open_btn{margin-top:(20/@rem);
    padding:(10/@rem) 0;
    border-radius: (8/@rem);
    background: salmon;
    color: #fff;
    font-size: (16/@rem);
}
</style>

URL Scheme 这种形式兼容性好，无论安卓或者 iOS 都能反对，是目前最罕用的形式。从上图咱们可能看出它也有一些比拟显著的毛病：

无奈精确判断是否唤起胜利，因为实质上这种形式就是关上一个链接，并且还不是一般的 http 链接，所以如果用户没有装置对应的 APP，那么尝试跳转后在浏览器中会没有任何反馈，通过定时器来疏导用户跳到利用商店，但这个定时器的工夫又没有精确值，不同手机的唤端工夫也不同，咱们只能大略的预计一下它的工夫来实现，个别设为 3000ms 左右比拟适合；
从上图中咱们能够看到会有一个弹窗提醒你是否在对应 APP 中关上，这就可能会导致用户散失；
有 URL Scheme 劫持危险，比方有一个 app 也向零碎注册了 zhihu:// 这个 scheme，唤起流量可能就会被劫持到这个 app 里；
容易被屏蔽，app 很轻松就能够拦挡掉通过 URL Scheme 发动的跳转，比方微信内常常能看到一些被屏蔽的景象。

Universal Link 是在 iOS 9 中新增的性能，应用它能够间接通过 https 协定的链接来关上 APP。
它相比前一种 URL Scheme 的长处在于它是应用 https 协定，所以如果没有唤端胜利，那么就会间接关上这个网页，不再须要判断是否唤起胜利了。并且应用 Universal Link，不会再弹出是否关上的弹出，对用户来说，唤端的效率更高了。

在 APP 中注册本人要反对的域名；
在本人域名的根目录下配置一个 apple-app-site-association 文件即可。（具体的配置前端同学不必关注，只需与 iOS 同学确认好反对的域名即可）

openByUniversal () {
  // 关上知乎问题页
  window.location.href = 'https://oia.zhihu.com/questions/64966868'
  // oia.zhihu.com
},

绝对 URL Scheme，universal links 有一个较大长处是它唤端时没有弹窗提醒是否关上，晋升用户体验，能够缩小一部分用户散失；
无需关怀用户是否装置对应的 APP，对于没有装置的用户，点击链接就会间接关上对应的页面，因为它也是 http 协定的门路，这样也能肯定水平解决 URL Scheme 无奈精确判断唤端失败的问题；
只可能在 iOS 上应用
只能由用户被动触发

在 2015 年的 Google I/ O 大会上，Android M 发表了一个新个性：App Links 让用户在点击一个一般 web 链接的时候能够关上指定 APP 的指定页面，前提是这个 APP 曾经装置并且通过了验证，否则会显示一个关上确认选项的弹出框，只反对 Android M 以上零碎。

App Links 的最大的作用，就是能够防止从页面唤醒 App 时呈现的抉择浏览器选项框;

前提是必须注册相应的 Scheme，就能够实现间接关上关联的 App。

App links 在国内的反对还不够，局部安卓浏览器并不反对跳转至 App，而是间接在浏览器上关上对应页面。
零碎询问是否关上对应 App 时，如果用户抉择“勾销”并且选中了“记住此操作”，那么用户当前就无奈再跳转 App。

Chrome Intent 是 Android 设施上 Chrome 浏览器中 URI 计划的深层链接替代品。
如果 APP 已装置，则通过配置的 URI SCHEME 关上 APP。
如果 APP 未装置，配置了 fallback url 的跳转 fallback url，没有配置的则跳转利用市场。

这两种计划在国内的利用都比拟少。

	URL Scheme	Universal Link	App Link
<ios9	反对	不反对	不反对
>=ios9	反对	反对	不反对
<android6	反对	不反对	不反对
>=android6	反对	不反对	反对
是否须要 HTTPS	不须要	须要	须要
是否须要客户端	须要	须要	须要
无对应 APP 时的景象	报错 / 无反馈	跳到对应的页面	跳到对应的页面

URI Scheme

URI Scheme 的兼容性是最高，但应用体验绝对较差:
当要被唤起的 APP 没有装置时，这个链接就会出错，页面无反馈。
当注册有多个 scheme 雷同的时候，没有方法辨别。
不反对从其余 app 中的 UIWebView 中跳转到指标 APP，所以 ios 和 android 都呈现了本人的独有解决方案。

Universal Link

曾经装置 APP，间接唤起 APP；APP 没有装置，就会跳去对应的 web link。
universal Link 是从服务器上查问是哪个 APP 须要被关上，所以不会存在抵触问题
universal Link 反对从其余 app 中的 UIWebView 中跳转到指标 app
毛病在于会记住用户的抉择：在用户点击了 Universal link 之后，iOS 会去检测用户最近一次是抉择了间接关上 app 还是关上网站。一旦用户点击了这个选项，他就会通过 safiri 关上你的网站。并且在之后的操作中，默认始终连续这个抉择，除非用户从你的 webpage 上通过点击 Smart App Banner 上的 OPEN 按钮来关上。

App link

长处与 universal Link 相似
毛病在于国内的反对绝对较差，在有的浏览器或者手机 ROM 中并不能链接至 APP，而是在浏览器中关上了对应的链接。
在询问是否用 APP 关上对应的链接时，如果抉择了“勾销”并且“记住抉择”被勾上，那么下次你再次想链接至 APP 时就不会有任何反馈

性能优化之 html、css、js 三者的加载程序
Vue 异步更新机制以及 $nextTick 原理
超全面总结 Vue 面试知识点，助力金三银四
【面试必备】前端常见的排序算法
CSS 性能优化的几个技巧
前端常见的平安问题及防范措施
为什么大厂前端监控都在用 GIF 做埋点？
前端人员不要只晓得 KFC，你应该理解 BFC、IFC、GFC 和 FFC

原文首发地址点这里，欢送大家关注公众号 「前端南玖」，如果你想进前端交换群一起学习，请点这里

我是南玖，咱们下期见！！！

关于前端:H5如何实现唤起APP

前言

唤端体验

唤端技术

URL Scheme（通用）

URL Scheme 组成

罕用 APP 的 URL Scheme

打开方式

判断是否胜利唤起

适用性

Universal Link（iOS）

原理

打开方式

适用性

App Link、Chrome Intents（Android）

App Link

Chrome Intents

计划比照

举荐浏览