iOS端如何通过扫描二维码打开已安装的渐进式Web应用(PWA)

以下方案仅支持iOS 16.4及以上版本，更低版本系统无原生支持方案

核心配置步骤 #

• 第一步：在站点根目录创建.well-known/apple-app-site-association文件，无需扩展名，内容示例如下：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "webapp:your.domain.com",
        "paths": ["/*"]
      }
    ]
  }
}

将your.domain.com替换为你的PWA对应站点域名即可。

• 第二步：修改PWA的manifest.json配置，添加关联应用声明，开启优先使用关联应用打开的开关，确保scope覆盖所有需要唤起的路径：

{
  "name": "你的PWA名称",
  "short_name": "短名称",
  "start_url": "/",
  "scope": "/",
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://your.domain.com/manifest.json"
    }
  ],
  "prefer_related_applications": true,
  "display": "standalone",
  // 其他原有manifest配置保持不变
}

• 第三步：将二维码内容设置为你的站点域名下的对应链接，只要用户已经将该PWA添加到主屏幕，扫码后iOS系统会优先直接唤起PWA，未安装时才会跳转Safari打开。

低版本兼容方案 #

如果需要适配iOS 16.4以下版本，可以通过Safari中转页实现半自动化唤起：

• 在manifest.json中注册自定义协议，比如yourpwa://
• 二维码指向的Safari中转页添加JS逻辑，页面加载后尝试跳转自定义协议yourpwa://path，如果跳转失败（说明未安装PWA）则引导用户添加PWA到主屏幕。

注意事项 #

• 通用链接对应的站点必须开启HTTPS，AASA文件需要允许苹果爬虫访问，不能配置301/302跳转
• 如果用户手动在Safari中打开过你的站点并选择了默认用Safari打开，后续扫码会优先走Safari，需要用户在Safari地址栏下拉，点击顶部的「打开App」按钮恢复唤起逻辑
• 目前iOS系统暂不支持安卓那样的二选一打开菜单，只会按优先级直接唤起已安装的PWA或跳转Safari

安卓端实现效果参考：

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