已安装PWA但navigator.getInstalledRelatedApps()返回空数组问题排查

以下是核心原因及对应解决方案：

1. Manifest配置缺失关键字段 #

prefer_related_applications是navigator.getInstalledRelatedApps()生效的必要字段，你的配置中缺少该字段，必须添加并设为true。同时要确保related_applications的JSON格式完全正确（引号统一为标准双引号），且url地址与当前站点manifest的绝对地址（含HTTPS协议、域名、路径）完全匹配。

修复后的manifest示例：

{
  "scope": "/",
  "start_url": "/?utm_source=pwa",
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://my-app.com/manifest.json"
    }
  ],
  "prefer_related_applications": true
}

2. 环境与权限限制 #

• 该API仅支持HTTPS环境（localhost开发环境可例外），HTTP部署下会直接返回空数组。
• 必须在用户交互事件（如按钮点击）中调用API，不能在页面加载时自动执行，部分浏览器会拦截无交互触发的API调用。
• 使用Chrome、Edge等最新版Chromium内核浏览器测试，旧版浏览器对webapp平台的related_applications支持存在兼容性问题。

3. PWA安装状态验证 #

• 确认PWA是通过浏览器官方安装流程添加的（如地址栏安装按钮、浏览器菜单的"安装应用"选项），手动添加的书签不被视为正式安装的PWA。
• 在浏览器开发者工具的Application面板中，检查Manifest是否被正确识别，Service Workers处于激活状态，这是PWA被标记为"已安装"的前提。

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