如何为我的网站/应用在Chrome导航栏添加「Install Application」入口

你观察到的导航栏右侧安装入口是Chromium系浏览器针对符合标准安装条件的PWA的原生默认展示效果，不属于未公开的新能力，只需满足PWA的基础安装触发规则即可自动启用，实现步骤如下：

必要实现条件 #

• 站点必须运行在HTTPS协议下，本地开发环境使用localhost调试时不受此限制
• 页面必须引入合法的Web App Manifest清单文件，可通过静态写死或JS动态注入的方式在HTML头部添加引入代码：

  <link rel="manifest" href="/manifest.json">
  

  清单文件必须包含以下必填配置项：
  • name或short_name：应用安装后显示的名称
  • icons：至少包含192x192、512x512两个分辨率的PNG格式图标声明
  • start_url：应用启动时默认加载的站点路径
  • display：值需设置为standalone或fullscreen，声明应用以独立于浏览器的窗口运行
• 站点必须注册并激活有效的Service Worker，且Service Worker代码中实现了fetch事件监听，保证离线状态下可以正常返回内容（仅做离线提示也可满足要求）

补充说明 #

满足以上所有条件后，Chromium浏览器会自动在导航栏右侧渲染安装图标，用户点击后触发的安装流程，和手动通过「更多工具 > 创建快捷方式」生成的独立容器快捷方式效果完全一致。
如果查看站点静态HTML头部未找到manifest引入，大概率是站点通过JS动态注入了manifest标签，可通过F12开发者工具的「应用 > 清单」路径查看当前站点加载的完整manifest配置。
如果需要自定义页面内的安装入口，可监听beforeinstallprompt事件，暂存事件对象后在用户点击自定义按钮时调用事件的prompt()方法，即可主动触发安装弹窗。

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