如何使用React JS在iPhone Safari浏览器中将条形码添加到Apple Wallet

核心逻辑 #

Apple Wallet的凭证是固定格式的.pkpass签名文件，iPhone Safari原生支持识别该格式文件，打开后会直接弹出「添加到钱包」的引导弹窗，不需要额外调用原生API。React端只需要负责触发合法.pkpass文件的下载即可。

前置准备 #

• 你需要持有有效的苹果开发者账号，开通Wallet功能，生成对应的Pass Type ID和签名证书，交由后端用来生成带官方合法签名的pkpass文件，未签名/签名无效的pkpass文件会被Safari直接拦截无法打开
• 后端需要提前做好pkpass生成的接口开发，支持传入条形码内容、自定义展示字段等参数，返回格式正确的pkpass文件

React端实现步骤 #

• 给添加按钮绑定点击事件，调用后端生成凭证的接口
• 接口返回成功后，将返回的文件流转为Blob格式，通过临时URL跳转触发Safari识别
• 核心代码示例：

// 添加到Apple Wallet点击事件
const handleAddToWallet = async () => {
  try {
    const response = await fetch("你的后端pkpass生成接口地址", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // 按需传入后端需要的业务参数，比如条形码内容、用户信息、有效期等
      body: JSON.stringify({
        barcodeContent: "你的条形码字符串",
        barcodeType: "PKBarcodeFormatCode128", // 常用的还有PKBarcodeFormatQR 对应二维码
        username: "用户姓名",
        expireDate: "2024-12-31"
      })
    });
    if (!response.ok) throw new Error("凭证生成失败");
    const passBlob = await response.blob();
    const tempUrl = window.URL.createObjectURL(passBlob);
    // 直接跳转临时地址即可触发Safari识别pkpass
    window.location.href = tempUrl;
    // 1秒后释放临时URL资源
    setTimeout(() => window.URL.revokeObjectURL(tempUrl), 1000);
  } catch (error) {
    console.error("添加失败", error);
    alert("添加到钱包失败，请稍后重试");
  }
};

Safari适配注意事项 #

• 不需要给a标签加download属性，Safari识别application/vnd.apple.pkpass类型的文件会自动触发添加流程，加download反而可能导致识别失败
• 后端接口返回pkpass时必须设置正确的响应头：Content-Type: application/vnd.apple.pkpass
• 不需要提前将条形码转为图片传入pass，生成pkpass时只需要传入条码内容和格式，苹果会自动生成符合Wallet规范的条形码展示，兼容性更好
• 测试必须在真实iPhone的Safari浏览器中进行，模拟器和第三方浏览器都不支持触发添加到Wallet的流程

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