乐趣区

关于前端: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)

URL Scheme(通用)

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

URL Scheme 组成

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

罕用 APP 的 URL Scheme

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)

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 上应用
  • 只能由用户被动触发

App Link、Chrome Intents(Android)

App Link

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

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

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

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

Chrome Intents

  • 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

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

我是南玖,咱们下期见!!!

退出移动版