Flutter调起iPhone Safari打开相似URL不跳转新页异常排查

开发Flutter应用过程中，需要引导用户跳转至系统Safari浏览器完成支付流程：应用内设置两个唤起Safari的按钮，用户点击按钮后跳转至Safari打开对应支付页面，完成支付后可回跳至应用。
当前存在异常：若Safari中已打开URL1对应的页面，用户返回应用后尝试打开URL2时，Safari不会加载URL2的新页面，仅会刷新原有URL1所在的标签页。
可通过以下链接在Safari中复现问题：

• URL1: https://staging-admin.spotlight.xyz/#/payment/intent/user/7906ab92-31ea-46a4-90f8-d645bedafb46?time=1657808668
• URL2: https://staging-admin.spotlight.xyz/#/payment/intent/user/7906ab92-31ea-46a4-90f8-d645bedafb46/org/4c3fbedd-9882-4aeb-8225-6e72c91fadbd?time=1657808709

已尝试排查方案 #

• 将URL中的?参数标识替换为/路径形式
• 在URL后追加时间戳参数（上述示例URL已采用该处理）

已知补充信息 #

• 支付页面对应的后端服务由Node.js应用提供
• 初始跳转实现代码如下：

Future<void> _launchURL(String paymentUrl) async {
    if (await canLaunch(paymentUrl)) {
      await launch(
        paymentUrl,
        forceSafariVC: false,
        enableJavaScript: true,
      );
    } else {
      throw 'Could not launch $paymentUrl';
    }
  }

• 已将url_launcher包升级至最新版本，改用launchUrl方法实现唤起逻辑，问题仍存在，确认URL确实在系统Safari中打开，对应代码如下：

Future<void> _launchURL(String paymentUrl) async {
    if (await canLaunchUrl(Uri.parse(paymentUrl))) {
      await launchUrl(
        Uri.parse(paymentUrl),
        webOnlyWindowName: '_blank',
      );
    } else {
      throw 'Could not launch $paymentUrl';
    }
  }

解决方案 #

该问题本质是iOS外部Safari的同域标签页默认复用机制导致，和前端路由、url_launcher版本、后端服务逻辑无关，可通过以下两种方案修复：

1. 强制外部Safari新建标签页加载
   原有代码里的webOnlyWindowName: '_blank'仅对Flutter Web端生效，iOS原生端不识别该配置。需要做两处调整：
   • 调用launchUrl时指定启动模式为LaunchMode.externalApplication，明确要求打开外部浏览器
   • 每次跳转时动态追加毫秒级时间戳作为查询参数，规避Safari的同地址标签页匹配规则，该参数不需要后端做特殊处理
     修正后可运行代码：

   Future<void> _launchURL(String paymentUrl) async {
     final originalUri = Uri.parse(paymentUrl);
     // 动态追加唯一时间戳参数，标记为新地址
     final targetUri = originalUri.replace(
       queryParameters: {
         ...originalUri.queryParameters,
         '_safari_ts': DateTime.now().millisecondsSinceEpoch.toString(),
       },
     );
     if (await canLaunchUrl(targetUri)) {
       await launchUrl(
         targetUri,
         mode: LaunchMode.externalApplication,
       );
     } else {
       throw 'Could not launch $paymentUrl';
     }
   }
   

2. 改用应用内SFSafariViewController承载支付流程
   不跳转外部Safari，直接在应用内调用系统原生的SFSafariViewController加载支付页，该组件和外部Safari共享Cookie存储，不会影响支付登录态、支付结果校验逻辑，同时每次调用都会生成新的页面实例，完全不会出现旧标签页复用问题，且用户不需要跳出应用，支付流程体验更顺畅。实现时只需要将启动模式改为LaunchMode.safariVC即可，不需要额外引入其他插件。

注意：追加时间戳时不要放在URL的hash（#）后面，必须作为标准查询参数放在?后面，否则Safari不会将其识别为地址的一部分，依然会命中标签页复用规则。

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