如何为网站添加Chrome/Edge浏览器的「应用可用」下载提示功能

你看到的Chrome、Edge地址栏弹出的「应用可用」提示，本质是Chromium内核浏览器基于站点PWA配置、关联原生安装包的自动识别能力——网站没有权限把自定义弹窗塞到地址栏的位置，只有满足浏览器的校验规则后，才会由浏览器自动渲染这个原生提示。Firefox目前不支持这套关联外部可执行安装包的逻辑，所以不会出现同类提示。

1. 配置合规的Web应用清单（Manifest） #

这是触发浏览器识别的基础，所有配置必须满足浏览器的强制校验规则：

• 在网站根目录放置manifest.json文件，并在所有页面的<head>标签中引入对应引用：
  <link rel="manifest" href="/manifest.json">
• manifest.json必须包含的核心字段：
  • name：应用的完整正式名称
  • short_name：应用的短名称，用于桌面图标展示
  • start_url：应用启动后默认跳转的站内路径
  • display：固定设置为standalone，告知浏览器这是独立应用而非普通网页
  • icons：至少包含192px、512px两个尺寸的透明底PNG格式应用图标，不能使用网页截图当图标
  • prefer_related_applications：必须设置为true，否则浏览器会优先引导安装网页版PWA，不会弹出下载原生安装包的提示
  • related_applications：数组格式，填入关联的Windows原生安装包信息，基础结构参考：

    {
      "platform": "windows",
      "url": "HTTPS协议下的安装包直链地址",
      "id": "应用的唯一产品标识ID"
    }
    

2. 满足浏览器的触发前置校验 #

就算配置好Manifest，不满足以下条件浏览器也不会弹出原生提示：

• 站点全站启用HTTPS，无混合内容加载，无控制台严重报错
• 托管的安装包（exe/msix）必须带有合法的OV或EV代码签名，无签名文件会被浏览器判定为风险程序，直接跳过识别
• 安装包的直链地址必须在浏览器信任的源范围内，不能跳转到第三方无信任的下载站点
• 用户访问站点时的累计正常停留时间达到30秒以上，未开启浏览器的内容拦截、隐私模式

3. 常见踩坑说明 #

• 注意区分两类容易混淆的提示：配好基础Manifest触发的「安装应用」提示，点击后是将网页封装成桌面快捷方式，不会下载exe；只有关联了已签名的原生安装包、且开启prefer_related_applications后，才会出现你提到的「应用可用」提示，点击后直接下载安装包
• 不要试图用JS自定义弹窗模拟这个效果，地址栏的原生提示是浏览器级别的渲染，网站无法修改它的位置、样式，也无法通过JS强制触发
• 不要使用伪造签名的安装包，浏览器会校验签名的合法性，一旦识别到签名无效，不仅不会弹提示，还会给站点打上风险标记
• 这套原生提示逻辑仅适用于Chrome、Edge等Chromium内核的Windows版本，Firefox、Safari目前都不支持关联外部原生exe的识别能力，不会显示同类提示

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