PWA 应用怎么设置 related_applications 关联原生移动应用-H5教程-PHP中文网

related_applications用于让网页识别已安装的自家原生应用以优化跳转，仅支持https及双向验证；需在manifest.json中声明并完成平台侧反向验证（如android的assetlinks.json、ios的asa文件）；js中调用navigator.getinstalledrelatedapps()检测。

pwa 应用怎么设置 related_applications 关联原生移动应用

明确关联目的和限制

设置 related_applications 是为了让网页能识别设备上是否已安装对应的原生应用（如 Android APK、iOS App 或封装的 PWA），从而优化跳转逻辑或隐藏重复安装提示。但要注意：它只能检查你自家的应用，不能探测第三方 App；且仅支持 HTTPS 网站，且必须完成双向验证关系。

在 manifest.json 中声明关联信息

在 Web 应用清单文件 manifest.json 的根对象中添加 related_applications 数组，并可选设 prefer_related_applications: true（表示优先引导用户打开原生应用而非网页）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

Android 原生应用示例：

"related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp",
    "url": "https://example.com/app"
  }
]

使用 Bubblewrap 封装的 PWA（TWA）：

"related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp.twa",
    "url": "https://example.com/"
  }
]

iOS 应用需通过 Apple App Site Association（ASA）文件验证，manifest.json 中不直接写 iOS 信息，而是靠域名级关联
最多只校验前三项，多余条目会被忽略

完成平台侧的反向验证

仅声明不够，还需让原生应用“认领”该网页，建立可信绑定：

Android（Google Play）：在 Play Console 的应用发布设置中，启用「数字资产链接」并上传签名的 assetlinks.json 到 https://example.com/.well-known/assetlinks.json
iOS（Apple）：在服务器根目录部署 apple-app-site-association（无扩展名），内容为 JSON 格式，声明 applinks 和对应 appID，且需通过 HTTPS 直接可访问、无重定向、无 MIME 类型错误
Windows（UWP）：在应用包清单中配置 uap:AppListEntry 并在网站部署 windows-app-web-link 文件

在网页中调用 API 检测安装状态

验证完成后，可在页面 JS 中使用标准 API 查询：

if ('getInstalledRelatedApps' in navigator) {
  try {
    const apps = await navigator.getInstalledRelatedApps();
    if (apps.length > 0) {
      // 已安装至少一个关联应用，例如跳转 schema
      window.location.href = 'myapp://open/home';
    }
  } catch (err) {
    console.warn('检测失败', err);
  }
}