如何实现点击网站元素时已装App触发Deep Link、未装则跳转指定网页

核心实现逻辑 #

浏览器侧没有权限直接读取用户设备的已安装应用列表，因此不存在100%准确的主动判断方案，行业通用做法是基于唤起超时兜底的逻辑实现，无需提前判断安装状态，直接通过唤起结果触发对应分支。

分端实现说明 #

iOS端 #

• 优先使用Universal Link作为唤起链接：iOS 9及以上系统原生支持，不会弹出是否打开的确认弹窗，判断准确率更高
• 低于iOS 9的版本使用自定义URL Scheme作为兜底唤起链接
• 微信、QQ等第三方应用的内置浏览器会禁止Universal Link与自定义Scheme唤起，需要先弹出引导提示，让用户手动跳转至系统Safari浏览器后再执行唤起逻辑

Android端 #

• 优先使用App Link作为唤起链接：Android 6及以上系统原生支持，无确认弹窗，唤起成功率更高
• 低于Android 6的版本使用自定义URL Scheme作为兜底唤起链接
• 国内多数厂商的内置浏览器、以及微信/抖音等第三方应用的内置WebView都会拦截自定义唤起逻辑，同样需要先引导用户跳转至系统默认浏览器再执行操作

可直接复用的代码示例 #

/**
 * 触发App唤起逻辑，自动判断走唤起还是兜底跳转
 * @param {string} deepLink 深链唤起地址（Universal Link/App Link/自定义Scheme）
 * @param {string} fallbackUrl 未唤起成功的兜底跳转地址
 */
function triggerAppJump(deepLink, fallbackUrl) {
  const invokeTime = Date.now();
  // 先尝试唤起App
  window.location.href = deepLink;
  // 设置2秒超时兜底
  const timer = setTimeout(() => {
    // 排除用户手动切走页面又切回的场景
    const timePassed = Date.now() - invokeTime;
    if (timePassed < 2200 && !document.hidden) {
      window.location.href = fallbackUrl;
    }
  }, 2000);

  // 监听页面切后台事件，说明唤起成功，取消兜底跳转
  window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      clearTimeout(timer);
    }
  });
}

优化准确率的补充方案 #

如果需要进一步降低误判概率，可以搭配以下辅助逻辑：

• 若用户之前在本设备登录过App，可将App生成的唯一设备标识与站点Cookie做关联匹配，匹配到的用户直接优先走唤起逻辑
• 针对iOS 14+、Android 12+的新系统特性，可完成官方应用关联校验配置，进一步提高唤起成功率

内容的提问来源于stack exchange，提问作者Steven Z.