React项目JS自动唤起原生应用失败但点击按钮触发正常如何解决

问题根因 #

该现象是iOS端Safari、Chrome浏览器的默认安全策略限制导致：为防范页面未经用户许可恶意跳转、恶意唤起原生应用，所有跨应用唤起、外部链接跳转类操作，必须在用户主动交互（点击、触摸等手势操作）的同步执行上下文中触发才会被浏览器放行。

你在useEffect中自动调用、setTimeout异步回调中调用的逻辑，都不属于用户主动交互的上下文，唤起请求直接被浏览器拦截，才会返回「未安装应用」的错误，和触发时机的延迟时长无关。

可行解决思路 #

• 优先采用用户主动点击触发的方案，这是兼容性最高、完全符合浏览器规范的实现方式。页面加载完成后渲染醒目的引导区域，提示用户点击按钮发起验证，点击时同步调用openAuthApp即可正常唤起应用，和现有按钮点击的逻辑完全一致。
• 若业务要求尽可能降低用户操作成本，可以在上一步页面的跳转交互（比如前一页「去验证」按钮的点击事件）中同步触发唤起逻辑，不需要等到当前验证页加载完成后再调用，利用前一步用户交互的上下文绕过限制。
• 若必须做自动唤起的尝试，可增加兜底逻辑：自动唤起失败后弹出引导层提示用户手动点击触发，参考代码如下：

import { useEffect, useState } from 'react';

const openAuthApp = () => {
  window.location = "https://app.bankid.com/?autostarttoken=&redirect=";
}

const AuthPage = () => {
  const [autoInvokeFailed, setAutoInvokeFailed] = useState(false);

  useEffect(() => {
    // 尝试自动唤起
    openAuthApp();
    // 1.5s后仍停留在当前页说明唤起被拦截
    const timer = setTimeout(() => {
      setAutoInvokeFailed(true);
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {autoInvokeFailed && (
        <div className="guide-card">
          <p>自动唤起验证应用失败，请点击下方按钮完成验证</p>
          <button onClick={openAuthApp}>开始验证</button>
        </div>
      )}
    </div>
  )
}

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