Safari中独立PWA跨源支付后获取查询参数并唤起应用的方案

一、跨源场景下获取支付查询参数 #

针对重定向页面与PWA不同源的场景，推荐以下几种可靠实现方案：

方案1：通过postMessage跨源通信 #

如果支付链接是从PWA以新标签页形式打开（比如用window.open()），重定向后的页面可直接向PWA窗口传递参数：

• 重定向页面的按钮点击逻辑：

document.querySelector('#back-to-app').addEventListener('click', () => {
  // 提取URL中的支付查询参数
  const paymentParams = window.location.search;
  // 验证目标窗口并发送消息，限制origin确保安全
  if (window.opener) {
    window.opener.postMessage(
      { type: 'PAYMENT_RESULT', data: paymentParams },
      'https://your-pwa-origin.com' // 替换为PWA实际域名
    );
    window.close(); // 可选：关闭当前页面
  }
});

• PWA侧监听消息并处理：

window.addEventListener('message', (event) => {
  // 校验消息来源，防止恶意注入
  if (event.origin !== 'https://your-redirect-page-origin.com') return;
  if (event.data.type === 'PAYMENT_RESULT') {
    // 解析参数判断支付状态
    const params = new URLSearchParams(event.data.data);
    const paymentStatus = params.get('status');
    // 后续逻辑：更新账户余额、提示用户等
  }
});

方案2：服务器临时存储+Deep Link拉取 #

如果担心window.opener失效（比如用户手动刷新了重定向页面），可以通过服务器中转：

1. 重定向页面将支付参数提交到我方服务器，生成一个有效期较短的临时token；
2. 返回按钮的Deep Link携带该token（例如myapp://payment-result?token=xxx）；
3. PWA被唤起后，携带token向服务器请求对应的支付结果；
4. 服务器验证token有效性后返回数据，PWA完成后续状态更新。

方案3：Shared Storage API（现代浏览器适用） #

如果重定向页面与PWA属于同一站点（Same Site），可使用Shared Storage跨源共享数据：

• 重定向页面存储参数：

async function savePaymentParams() {
  const storage = await navigator.storage.getDirectory();
  const file = await storage.getFileHandle('payment-temp.json', { create: true });
  const writable = await file.createWritable();
  await writable.write(JSON.stringify({
    params: window.location.search,
    expire: Date.now() + 300000 // 5分钟有效期
  }));
  await writable.close();
}
document.querySelector('#back-to-app').addEventListener('click', savePaymentParams);

• PWA读取并处理参数：

async function loadPaymentParams() {
  try {
    const storage = await navigator.storage.getDirectory();
    const file = await storage.getFileHandle('payment-temp.json');
    const fileData = await file.getFile();
    const paymentInfo = JSON.parse(await fileData.text());
    
    if (Date.now() < paymentInfo.expire) {
      const params = new URLSearchParams(paymentInfo.params);
      // 处理支付结果
    }
    // 清理临时文件
    await storage.removeEntry('payment-temp.json');
  } catch (e) {
    // 无有效数据时的降级逻辑
  }
}
// PWA启动时触发读取
window.addEventListener('load', loadPaymentParams);

二、点击按钮唤起独立PWA而非Safari实例 #

核心是利用PWA的Deep Link能力，结合浏览器唤起规则实现：

1. 基础配置（必须） #

确保PWA的manifest.json配置正确：

{
  "name": "你的PWA应用",
  "short_name": "PWA",
  "display": "standalone", // 关键：以独立窗口运行
  "scope": "/", // 定义PWA的作用域范围
  "start_url": "/",
  "protocol_handlers": [ // 配置自定义URL Scheme
    {
      "protocol": "web+your-app",
      "url": "/payment-result?%s"
    }
  ]
}

2. iOS Safari专属：配置Universal Links #

如需在iOS上稳定唤起，需配置Universal Links：

• 在域名根目录放置apple-app-site-association文件，示例内容：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "你的团队ID.你的PWA Bundle ID",
        "paths": ["/payment-result/*"] // 匹配返回链接路径
      }
    ]
  }
}

• 在Apple开发者后台开启对应域名的Associated Domains权限。

3. 按钮点击事件实现 #

在重定向页面的按钮中，通过自定义Scheme或Universal Links唤起PWA，并做降级处理：

document.querySelector('#back-to-app').addEventListener('click', () => {
  const paymentParams = window.location.search;
  // 优先使用自定义URL Scheme
  const deepLink = `web+your-app://${paymentParams.slice(1)}`;
  // 或使用Universal Links：`https://your-domain.com/payment-result${paymentParams}`
  
  window.location.href = deepLink;
  
  // 降级逻辑：500ms内未唤起则跳转PWA网页版
  setTimeout(() => {
    window.location.href = `https://your-pwa-url.com/payment-result${paymentParams}`;
  }, 500);
});

注意：Safari要求必须由用户主动交互（如点击按钮）触发Deep Link，自动跳转会被浏览器拦截。

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