前端唤醒移动端App

Daniel_Zheng
857 阅读4分钟

最近接到这样一个需求，在我们web端的视频会议项目中分享出一链接到移动端，如果移动端有安装我们公司的视频会议app,就直接唤醒这个app，用户就可以用这个app加入会议，如果用户没有安装app，则跳转至应用市场去下载app。这样一种常见的唤端操作，可以作为我们产品的拉新和引流的手段，我整理了一下实现思路，把它写了下来。

  1. 判断用户的终端设备：
 isWeixin: navigator.userAgent.includes('MicroMessenger') // 判断微信
 isAndroid: navigator.userAgent.includes('Android'), // 安卓
 isIos: navigator.userAgent.includes('iPhone') ||  navigator.userAgent.includes('iOS'), // ios
 isMac = /Macintosh|Mac OS X/i.test(navigator.userAgent) // mac系统
 isWindows: navigator.userAgent.includes('Windows') // windows系统
 isIpad = navigator.userAgent.includes('iPad')// ipad

注意： 微信/微博/百度这种头部app都各自维护着一个白名单，如果你的域名在白名单内，那这个域名下所有的页面发起的 URL Scheme 就都会被允许,用户直接通过微信进行分享url schemes 是无法直接打开的.因此，我们在对微信单独做了一种处理，提醒用户通过浏览器打开URL scheme，从而来唤醒我们的app。 微信里面对url scheme做了限制， 但是在ios9之后可以使用universal links来突破这个限制。

因此对于安卓系统/windows/mac系统，提示用户用浏览器来打开唤端地址，ios系统使用universal links

  1. 对接app开发人员，准备好url scheme 或者是 universal link

  2. 针对安卓终端/mac/windows/用户的唤醒方法-- URL Scheme

  • URL Scheme就是一个URL前面的协议部分。
  • 服务器资源分配一个 URL，以便我们去访问它一样，我们同样也可以给手机APP分配一个特殊格式的 URL，用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部分。当我们访问带有app的scheme地址的时候，如果系统中有注册这个app, 那么系统中就会使用这个app来打开这个链接了。 url scheme 的调用方式，使用window.location.href = url shceme 地址 来进行调用。

注意：  对于不同的终端设备的app客户端应用来说，它的url scheme可能是不一样的，例如：anywhere在安卓系统/windows系统/mac系统分别是： anywhere, anywherewin,anywheremac。

例如下面这个URL：  [https://www.baidu.com](https://www.baidu.com/) ，scheme 就是 https 了。

[scheme:][//authority][path][?query][#fragment]
以 `https://www.baidu.com` 为例，scheme 就是 `https` 了。

相关链接： www.jianshu.com/p/90daeb86c… sspai.com/post/31500

  1. ios9之后使用universal link 官方文档： developer.apple.com/library/arc…

配置方法：

  • 域名支持 https
  • 在ios的开发者中心 Identifiers 下 AppIDs 找到自己的 App ID，编辑打开 Associated Domains 服务。
  • 打开工程配置中的 Associated Domains ，在其中的 Domains 中填入你想支持的域名，必须以 applinks: 为前缀
  • 配置 apple-app-site-association 文件，文件名必须为 apple-app-site-association ， - 上传该文件到你的 HTTPS 服务器的 根目录 或者 .well-known 目录下不带任何后缀 注意： 以上四部对接ios的开发人员即可，web前端只需将配置好的well-know文件放到public的目录下即可。 apple-app-site-association文件的内容一般如下：
{
 "applinks": {
     "apps": [],
     "details": [
         {
             "appID": "苹果对每个APP给定的唯一ID",
             "paths": [ "/open-app"]
         }
     ]
 }
}

partyline中apple-app-site-association文件：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "YDEVQQ22JR.com.tvunetworks.TVUAnywherePro",
        "paths": ["/token/*", "/partyline/*"]
      },
      {
        "appID": "YDEVQQ22JR.com.tvunetwork.TVU-Anywhere",
        "paths": ["/token/*", "/partyline/*"]
      }
    ]
  }
}
  1. 判断是否成功唤起APP 首先浏览器是不能自动判断设备是否安装APP，也没有直接的方法判断是否成功唤起了APP。 因此，当前页面被置入后台，则说明唤端成功。我们会在用户点击链接开始唤端的时候开启一个延时器， 如果用户成功离开了这个页面就直接清除定时器，如果没有，直接跳转到app的下载地址。

具体处理流程：

  1. 当点击唤端后，定时器延时 n 秒(我们设定的是 1.5 秒)后执行下载操作
  2. 监听 visibilitychange 事件，如果页面隐藏，则表示唤端成功，清除定时器
  3. 如果 visibilitychange 事件没有被触发，那么就代表唤端失败，n 秒后就会执行下载的操作
    document.addEventListener('visibilitychange', () => {
      // 如果页面隐藏，(被置入后台)推测打开scheme成功，清除定时器。
      if (document.hidden || document.webkitHidden) {
        clearTimeout(this.downloadTime)
      }
    })
    
    this.downloadTime = setTimeout(() => {
        if (this.downloadUrl) {
          window.location = this.downloadUrl
        } else {
          console.info('暂无下载地址')
        }
      }, 1500)

总结： url scheme 在ios端存在一些兼容性的问题，因此，对于ios9之后的考虑universal link app只有在微信的白名单之内，才能直接在微信中唤醒，否则只能通过浏览器去打开唤醒连接进行唤醒. 唤端判断的延时器毫秒数，一般在3000ms以内即可。

小结： 

  1. 微信中唤起应用：安卓/windows/mac系统，提示用户用浏览器来打开唤端地址，ios系统使用universal links
  2. 安卓系统使用url scheme 进行唤端
  3. ios系统使用universal links 进行唤端.
avatar
文章
阅读
粉丝