React PWA在iOS设备standalone模式失效 跳转后自动打开Safari问题求助

1. 修正manifest路径匹配规则 #

你当前配置的scope为/law，iOS对路径匹配规则比较严格，容易出现匹配歧义：

• 将scope、start_url、id三个字段的值末尾统一添加斜杠，修改为/law/
• 确保应用所有页面路径都属于/law/的子路径，任何跳转跳出该前缀都会触发iOS自动打开Safari
• 修改完manifest后需要删除桌面已添加的PWA图标，重新添加才能生效，iOS会长期缓存旧manifest配置

2. 统一跳转逻辑，禁用全路径跳转 #

iOS PWA对原生全路径跳转兼容度极低，统一调整跳转逻辑：

• 所有内部跳转改用React Router提供的<Link>组件、useNavigate/history.push编程式跳转，全部使用相对路径，不要拼接完整域名
• 排查所有原生<a>标签，去掉target="_blank"属性，确需新页打开的场景改用内部模态框实现
• 禁止直接给window.location.href赋值带域名的完整URL

3. 补充iOS专属兼容meta标签 #

部分iOS版本对manifest配置的识别优先级低于页面meta标签，在入口HTML的head标签中添加以下配置：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#34abc4">
<meta name="apple-mobile-web-app-title" content="my name">

4. 全局拦截跳转事件，强制内部处理 #

在应用根组件内添加全局监听逻辑，拦截所有跳转事件，避免触发原生跳转：

// 仅在PWA standalone模式下生效
if (window.navigator.standalone) {
  document.addEventListener('click', (e) => {
    const targetLink = e.target.closest('a');
    // 匹配同域名且在scope范围内的链接
    if (targetLink && targetLink.origin === window.location.origin && targetLink.pathname.startsWith('/law')) {
      e.preventDefault();
      // 调用你项目中的路由跳转逻辑即可
      navigate(targetLink.pathname + targetLink.search);
    }
  }, false);
}

5. 调整登录重定向逻辑 #

如果你的登录是服务端重定向/OAuth回调的形式：

• 确保登录完成后的回调地址、服务端返回的302重定向地址都是相对路径，不要返回带完整域名的跳转地址
• 避免登录完成后触发全页面重载，改用路由跳转更新页面状态

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