Universal link 和 scheme 的关系

前言

前阵子在实现应用间链接跳转时碰到了个问题,ios 下实现用户未安装小黑盒跳转 apple store,安装了则跳小黑盒 app,起初使用 scheme 实现,实现的方案是延时 检测 用户页面是否 visible,这种方案在用户切屏速度过快时就会失效,如下

js 复制代码
tryOpenChatApp() {
  const chatProtocolUrl = `heyboxchat://***`;
  window.location.href = chatProtocolUrl;

  setTimeout(() => {
    if (document.visibilityState === 'visible') {
      this.redirectToChatDownload();
    }
  }, 2000);
},

后面把协议换成了 Universal Link 就不需要延时检测,Universal link 能够天生支持未安装应用直接跳商店,本期文章就来了解下 Universal link 与 URL Scheme 的关系

URL Scheme

URL Scheme 是一种自定义的 URL 协议,允许应用注册特定的协议头来响应特定格式的链接。当用户点击包含该 scheme 的链接时,系统会尝试打开注册了该 scheme 的应用。

一个典型的 URL Scheme 链接结构如下:

ini 复制代码
scheme://host/path?query=value

比如 小黑盒 的 scheme 就是 heyboxchat://

URL Scheme 的工作原理如下:

  1. 应用在 Info.plist(iOS)或 AndroidManifest.xml(Android)中注册自定义 scheme
  2. 当用户点击包含该 scheme 的链接时,操作系统查找注册了该 scheme 的应用
  3. 如果找到对应应用,系统启动该应用并传递链接参数
  4. 如果应用未安装,通常会显示错误提示或无响应

URL Scheme 的优势

  1. 实现简单:只需要在应用配置文件中注册 scheme 即可
  2. 跨平台支持:iOS 和 Android 都支持这种方式
  3. 历史悠久:是最早的应用间跳转解决方案
  4. 灵活性高:可以传递复杂的参数和路径信息

URL Scheme 的局限性

  1. 安全性问题:任何应用都可以注册相同的 scheme,存在被恶意应用劫持的风险
  2. 用户体验差:如果目标应用未安装,用户会看到错误提示
  3. 无法验证应用身份:系统无法确保打开的是预期的应用
  4. 协议冲突:多个应用可能注册相同的 scheme,导致不确定性

下面看 Universal Link

Universal Link 是苹果在 iOS 9 中引入的新技术,旨在解决 URL Scheme 存在的安全性和用户体验问题。它通过将应用与特定的网站域名关联,提供了更安全、更可靠的深度链接解决方案。

Universal Link 的工作原理

  1. 开发者在应用中配置 Associated Domains,指定关联的域名
  2. 在对应的网站服务器上放置 apple-app-site-association 文件
  3. 用户安装应用时,iOS 系统验证应用与域名的关联关系
  4. 当用户点击该域名下的链接时,系统优先打开关联的应用
  5. 如果应用未安装,链接会在浏览器中正常打开网页

现在看下 apple-app-site-association 文件

这是一个 JSON 格式的配置文件,必须放置在网站根目录或 .well-known 目录下:

json 复制代码
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.com.example.app",
        "paths": [
          "/product/*",
          "/user/*",
          "NOT /admin/*"
        ]
      }
    ]
  }
}

Universal Link 的优势

  1. 安全性高:通过域名验证确保应用身份的唯一性
  2. 用户体验好:应用未安装时自动跳转到网页,无错误提示
  3. 无需用户确认:系统直接打开应用,无需用户选择
  4. SEO 友好:链接本身就是有效的网页 URL
  5. 支持延迟深度链接:可以在应用安装后跳转到指定页面

Universal Link 同样也有限制

  1. 仅支持 iOS:Android 有类似的 App Links 技术,但实现方式不同
  2. 需要 HTTPS:必须使用安全的 HTTPS 协议
  3. 域名要求:需要拥有并控制一个域名
  4. 配置复杂:需要同时配置应用和服务器端
  5. 调试困难:问题排查相对复杂

Universal LinkURL Scheme 并不是完全对立的技术,而是互补的关系:

  1. Universal Link 主要解决从网页到应用的跳转
  2. URL Scheme 更适合应用间的直接跳转
  3. 在实际项目中,两者经常同时使用

技术层面的区别

特性 Universal Link URL Scheme
安全性 高(域名验证) 低(可被劫持)
用户体验 好(无错误提示) 差(应用未安装时报错)
实现复杂度
平台支持 iOS(Android 有 App Links) 跨平台
网络要求 需要 HTTPS
域名要求 必须 不需要

使用场景对比

  1. 从网页跳转到应用:优先使用 Universal Link
  2. 应用间直接跳转:使用 URL Scheme
  3. 分享功能:Universal Link 更适合
  4. 第三方应用集成:通常使用 URL Scheme
  5. 营销推广:Universal Link 提供更好的用户体验

在实际开发中,建议采用混合使用策略:

  1. 对外分享和营销推广使用 Universal Link
  2. 应用间跳转使用 URL Scheme
  3. 提供降级方案:Universal Link 失败时回退到 URL Scheme

实现示例

iOS 应用中同时支持两种方式:

swift 复制代码
// Universal Link 处理
func application(_ application: UIApplication,
                continue userActivity: NSUserActivity,
                restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if userActivity.activityType == NSUserActivityTypeBrowsingWeb {
        if let url = userActivity.webpageURL {
            // 处理 Universal Link
            handleUniversalLink(url)
            return true
        }
    }
    return false
}

// URL Scheme 处理
func application(_ app: UIApplication,
                open url: URL,
                options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // 处理 URL Scheme
    handleURLScheme(url)
    return true
}

调试和测试

  1. Universal Link 调试:

    • 使用苹果的验证工具检查配置
    • 通过 Safari 测试链接跳转
    • 检查 apple-app-site-association 文件的可访问性
  2. URL Scheme 调试:

    • 在 Safari 地址栏直接输入 scheme 链接测试
    • 使用模拟器和真机分别测试
    • 检查应用是否正确注册了 scheme

Android 平台有类似 Universal Link 的技术叫做 App Links

  1. 同样需要域名验证
  2. 使用 Digital Asset Links 文件进行验证
  3. 提供类似的安全性和用户体验

Intent Filter

Android 的 Intent Filter 类似于 iOS 的 URL Scheme

  1. AndroidManifest.xml 中配置
  2. 支持自定义协议和标准 HTTP/HTTPS 链接
  3. 可以处理多种类型的链接

最后

Universal LinkURL Scheme 都是移动应用生态系统中重要的深度链接技术,它们各有优势和适用场景:

  1. URL Scheme 作为传统方案,实现简单但存在安全性和用户体验问题,比如文中开头提到的问题
  2. Universal Link 作为 ios 的链接技术,提供了更好的安全性和用户体验,但实现相对复杂
  3. 在实际应用中,两者往往结合使用
相关推荐
张拭心3 分钟前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能
时光不负努力4 分钟前
typescript常用的dom 元素类型
前端·typescript
小怪点点9 分钟前
大文件切片上传
前端
时光不负努力10 分钟前
TS 常用工具类型
前端·javascript·typescript
SuperEugene11 分钟前
Vue状态管理扫盲篇:Vuex 到 Pinia | 为什么大家都在迁移?核心用法对比
前端·vue.js·面试
张拭心14 分钟前
Android 17 来了!新特性介绍与适配建议
android·前端
徐小夕18 分钟前
pxcharts-vue:一款专为 Vue3 打造的开源多维表格解决方案
前端·vue.js·github
Hilaku18 分钟前
我会如何考核一个在简历里大谈 AI 提效的高级前端?
前端·javascript·面试
青青家的小灰灰40 分钟前
React 反模式(Anti-Patterns)排查手册:从性能杀手到逻辑陷阱
前端·javascript·react.js
青青家的小灰灰41 分钟前
告别 Prop Drilling:Context API 的陷阱、Reducer 模式与原子化状态库原理
前端·javascript·react.js