如何在React.js中使用Deep Linking与Apple App Site Association

一、创建并配置apple-app-site-association文件 #

这是实现苹果深度链接的核心文件，需严格遵循以下要求：

• 放置路径：网站根目录 或 /.well-known/ 目录下，文件名必须是apple-app-site-association（无.json后缀）
• 文件格式示例：

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "你的苹果团队ID.应用BundleID",
        "paths": ["*", "/products/*", "NOT /admin/*"]
      }
    ]
  }
}

• 关键参数说明：
  • appID：由苹果开发者账号的团队ID和App的BundleID拼接而成（可在苹果开发者后台查看）
  • paths：定义触发深度链接的路径规则，支持通配符*和排除规则NOT

二、React.js项目部署配置 #

1. Create React App（CRA）项目 #

• 将apple-app-site-association文件直接放入项目的public目录，构建后该文件会自动部署到网站根目录
• 服务器路由适配：由于React是单页应用，需确保服务器能处理深度链接路径，示例配置：
  • Nginx添加：

    location / {
      try_files $uri $uri/ /index.html;
    }
    

  • Apache添加：

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
    

2. Next.js项目 #

• 将apple-app-site-association文件放入public/.well-known/目录，Next.js会自动处理部署
• 若需自定义深度链接逻辑，可通过next.config.js配置路由fallback，或使用getServerSideProps解析路径并处理跳转

三、苹果开发者后台与Xcode配置 #

• 苹果开发者后台：进入App的标识符配置，开启「Associated Domains」权限，添加applinks:你的域名（例如applinks:example.com）
• Xcode项目：在项目的「Signing & Capabilities」中添加「Associated Domains」，同样填入applinks:你的域名

四、测试验证 #

• 文件有效性检查：使用苹果官方的App Search验证工具确认文件格式和配置合规
• 真机功能测试：安装App后，在Safari中打开配置好的链接，验证是否能自动跳转到App内对应页面；若需在App内处理路径解析，可通过iOS原生的UIApplicationDelegate方法或React Native的Linking模块实现

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