iOS web app跳转Bank-ID认证时fetch连接断开问题求解决方案

问题根因 #

iOS Safari 有系统级的后台资源限制策略，页面失活进入后台超过10秒后，会主动暂停/释放所有未完成的 fetch/XHR 长连接请求，该策略属于系统默认优化规则，无法通过前端配置直接绕过，所以保活连接的方案稳定性都较低，更推荐做登录流程重构。

方案一：临时保活连接（仅做兼容补充，不推荐作为核心方案） #

• 替换普通 fetch 请求为 XMLHttpRequest，Safari 对 XHR 请求的后台保留时间比 fetch 略长，可提升小概率的保活成功率
• 跳转 Bank-ID 应用前启动一个空的定时器循环，定时器内执行简单的空计算逻辑，可一定程度上延长页面后台存活时间，最多可延长到30秒左右

方案二：登录流程重构（最稳妥，兼容性最高） #

重构为非长连接等待的轮询模式，完全避开 Safari 后台连接清理的限制，也是 Bank-ID 官方推荐的移动端适配方案，流程如下：

1. 用户点击登录按钮后，前端仅向后端发起启动 Bank-ID 流程的短请求，后端调用 Bank-ID 启动接口后立即返回本次登录的唯一标识 orderRef 以及 Bank-ID 跳转链接，不保持连接等待认证结果
2. 前端拿到返回值后，将 orderRef 存入 localStorage/sessionStorage，同时直接跳转 Bank-ID 应用完成认证
3. Bank-ID 认证完成后自动跳转回你的 Web 应用，前端初始化时检测到本地存储有未失效的 orderRef，就开始按2-3秒的间隔轮询后端的认证结果查询接口，最多轮询15次即可覆盖 Bank-ID 常规认证超时时间
4. 后端新增独立的认证结果查询接口，接收 orderRef 后返回对应认证状态（待认证/成功/失败/超时），前端拿到成功状态后清除本地存储的 orderRef，执行后续登录逻辑，拿到失败/超时状态则提示用户重新发起登录

适配细节 #

• 跳转 Bank-ID 应用统一使用 window.location.href 赋值，不要使用 window.open，避免触发 Safari 弹窗拦截规则导致跳转失败
• 增加页面可见性监听，页面从后台切回时立即触发一次结果查询，减少用户等待时间，示例代码如下：

document.addEventListener('visibilitychange', () => {
  const orderRef = localStorage.getItem('bankid_order_ref')
  if (document.visibilityState === 'visible' && orderRef) {
    // 调用你的结果查询逻辑
    queryAuthResult(orderRef)
  }
})

• 针对 Safari 无痕模式下 localStorage 无法写入的情况，可降级为将 orderRef 拼接在 Bank-ID 回调地址的 query 参数中，orderRef 为一次性临时标识，过期即失效，不存在安全风险

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