使用getInstalledRelatedApps()检测应用安装状态失败问题排查

DevOps 小满

2026-8-22

问题

我按照web.dev教程指引，使用getInstalledRelatedApps() API检测手机上是否已安装我的应用——已完成manifest.json部署、页面脚本添加，且应用已上架Play Store。预期逻辑是：已安装则提示打开应用，未安装则提示下载。但访问页面后底部无任何内容显示，而官方demo在未安装应用时会显示“resolved (0)”。想确认是脚本有误还是需要调整配置？

用到的脚本：

const status = document.getElementById('status');
const ul = document.getElementById('installedApps');

window.addEventListener('load', () => {
  // Check to see if the API is supported.
  if ('getInstalledRelatedApps' in navigator) {
    const divNotSupported = document.getElementById('notSupported');
    divNotSupported.classList.toggle('hidden', true);
    checkForRelatedApps();
  }
});

function checkForRelatedApps() {
  navigator.getInstalledRelatedApps().then((relatedApps) => {
    status.textContent = `resolved (${relatedApps.length})`;
    relatedApps.forEach((app) => {
      const lines = [];
      lines.push(`<b>id:</b> <code>${app.id}</code>`);
      lines.push(`<b>platform:</b> ${app.platform}`);
      lines.push(`<b>url:</b> <a href="${app.url}">${app.url}</a>`);
      const li = document.createElement('li');
      li.innerHTML = lines.join('<br>');
      ul.appendChild(li);
    });
  });
}

对应的HTML结构：

<div>
  <b>Installed Apps:</b> <span id="status"></span>
  <ul id="installedApps">
  </ul>
</div>

排查与解决建议

补充分支逻辑，确认API支持状态
当前代码仅在API支持时执行后续操作，若API不支持则无任何反馈。可补充else分支，给status元素添加提示：
```
else {
  status.textContent = "API not supported";
}
```
先确认当前环境是否支持该API。
移除或补全不存在的DOM元素操作
脚本中尝试获取id="notSupported"的元素并添加hidden类，但你的HTML结构里没有这个元素，会抛出错误导致后续checkForRelatedApps()无法执行。要么在HTML中添加该元素，要么直接删除这段操作代码。
验证manifest.json配置正确性
确保manifest.json中related_applications字段配置完全正确，格式示例：
```
"related_applications": [
  {
    "platform": "play",
    "id": "你的应用Play Store包名",
    "url": "你的应用Play Store链接"
  }
]
```
同时确认页面已通过<link rel="manifest" href="/manifest.json">正确引入manifest，且文件可正常访问。
添加错误捕获逻辑
当前then方法未搭配catch，若getInstalledRelatedApps()调用出错（如权限、配置问题），脚本会静默失败。补充错误捕获：
```
navigator.getInstalledRelatedApps().then((relatedApps) => {
  // 原有逻辑
}).catch((err) => {
  status.textContent = `Error: ${err.message}`;
  console.error(err);
});
```
可在控制台查看具体错误信息，定位问题。
确认测试环境符合要求
getInstalledRelatedApps() API有严格环境限制：
- 必须在HTTPS环境运行（本地开发可用localhost）
- 仅支持移动端Chrome、Edge等浏览器
- 应用必须从官方应用商店安装，且包名、配置与manifest完全匹配

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

使用getInstalledRelatedApps()检测应用安装状态失败问题排查

问题 #

排查与解决建议 #

问题

排查与解决建议