如何通过自定义URL从网站手动触发App Clip启动

你现在已经能正常调出系统App Clip横幅，说明AASA域名关联、App Clip基础配置已经全部生效，不需要再调整App侧或者域名关联的配置，直接改前端页面逻辑就行。

核心实现步骤 #

• 关闭默认系统横幅
  页面顶部的系统横幅依赖页面head内的<meta name="apple-itunes-app">标签触发自动加载，你直接把这个标签删掉就行——注意：AASA文件里的域名关联规则才是唤起App Clip的核心依据，删meta标签只会关掉自动弹出的系统横幅，完全不会影响手动触发唤起App Clip的能力，刚好解决系统横幅加载慢、和自定义横幅冲突的问题。
• 自定义按钮唤起逻辑
  App Clip本质是通过Universal Link触发唤起，你只需要给自定义按钮绑定点击事件，用户点击时同步跳转到你在AASA里配置给App Clip的对应路径即可。
  注意跳转逻辑必须放在用户主动触发的点击事件同步回调里，不能放在接口请求、定时器这类异步回调中，否则会被Safari判定为非用户主动行为，拦截跳转。
  参考代码：

  <!-- 自定义横幅里的触发按钮 -->
  <button id="triggerAppClip">一键打开轻App</button>
  <script>
    document.querySelector('#triggerAppClip').addEventListener('click', () => {
      // 替换成你AASA中配置给App Clip的对应业务路径
      window.location.href = 'https://你的自有域名/绑定AppClip的业务路径'
    })
  </script>
  

• 兼容兜底逻辑
  加个简单的UA判断，对不支持App Clip的场景（iOS14以下系统、第三方内置浏览器、非iOS设备）做兜底：可以引导用户复制链接到Safari打开，或者直接跳转到主App的App Store下载页。
  参考判断逻辑：

  function checkAppClipSupport() {
    const ua = navigator.userAgent
    const isIOS = /iPhone|iPod/.test(ua)
    if (!isIOS) return false
    const versionMatch = ua.match(/OS (\d+)_/)
    if (!versionMatch) return false
    const iosMainVer = parseInt(versionMatch[1], 10)
    // 仅iOS14及以上版本的Safari支持App Clip唤起，排除Chrome、Firefox等第三方iOS浏览器
    return iosMainVer >= 14 && /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS/.test(ua)
  }
  

避坑提示 #

• 跳转的路径必须和AASA文件里配置给App Clip的路径规则完全匹配，否则只会当成普通网页跳转，不会触发App Clip唤起
• 正常触发后系统会自动弹出App Clip的唤起卡片，和点系统横幅的效果完全一致，如果你配置了自定义的App Clip卡片封面、参数，都会正常生效
• 不要用window.open做跳转，直接修改window.location.href即可，避免被弹窗拦截

内容的提问来源于stack exchange，提问作者StormTrooper