如何实现URL重定向在安卓、iOS端唤起APP，未安装则跳转浏览器

失效核心原因 #

现有代码无法生效是主流浏览器的安全策略限制导致：

• 服务端3xx重定向仅支持http/https等标准网络协议，不支持instagram://这类自定义应用协议，所以PHP直接返回header("Location: xxx")的逻辑完全无效
• 所有非用户真实主动交互触发的deeplink跳转、脚本模拟点击行为都会被浏览器拦截，页面加载自动跳转、JS触发a标签点击的逻辑都会被阻止，只有用户手动点击按钮/链接的行为才能触发deeplink唤起

实现方案 #

方案1：使用系统官方深度链接标准（最稳定，无拦截，是同类商用服务的核心实现逻辑） #

这种方案不需要额外的前端跳转逻辑，系统会自动判断应用是否安装，自动处理唤起还是打开网页，完全不会被浏览器拦截：

• iOS端使用通用链接（Universal Links）：在你的服务域名根目录放置apple-app-site-association配置文件，完成域名和目标APP的关联，用户访问你域名下的对应路径时，iOS系统会自动检测是否安装对应APP，已安装直接唤起APP，未安装正常打开网页
• Android端使用App Links：同理在域名的/.well-known/目录下放置assetlinks.json配置文件，完成域名和目标APP的关联，安卓系统会自动处理唤起逻辑

方案2：前端兼容方案（适合临时场景，需要用户主动点击） #

如果不想做官方关联配置，可以用前端交互逻辑兼容，必须把跳转触发和用户手动点击绑定，示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>打开应用</title>
</head>
<body>
<button id="openBtn" style="width: 90%; margin: 30px auto; display: block; height: 50px; font-size: 18px;">打开Instagram</button>
<script>
const deeplink = 'instagram://user?username={USERNAME}';
const fallbackUrl = 'https://www.instagram.com/{USERNAME}/';
const openBtn = document.getElementById('openBtn');
let hasClicked = false;
openBtn.addEventListener('click', function() {
  hasClicked = true;
  // 尝试唤起APP
  window.location.href = deeplink;
  // 2秒后如果页面仍然可见，说明未安装APP，跳网页版
  setTimeout(() => {
    if (document.visibilityState === 'visible') {
      window.location.href = fallbackUrl;
    }
  }, 2000);
});
// 处理iOS特殊场景：用户切到APP后清除定时器，避免返回页面时误跳转
document.addEventListener('visibilitychange', () => {
  if (document.hidden && hasClicked) {
    clearTimeout();
  }
});
</script>
</body>
</html>

注意事项 #

• 定时器时长建议设置为1.5-2秒，时长过短会导致APP还没完成唤起就触发网页跳转
• iOS 15+版本的Safari对非通用链接的deeplink会弹出确认弹窗，用户点击取消后才会触发fallback跳转，必须配合visibilitychange判断页面可见性，避免用户已经跳转到APP后返回页面时误触发网页跳转
• 安卓部分定制浏览器会拦截非官方App Links的自定义协议跳转，优先使用方案1的官方关联逻辑适配性更好

内容的提问来源于stack exchange，提问作者I. Sen