如何为PWA创建可直接触发安装的外部链接或页面安装按钮

首先直接给出核心判定：网页内添加按钮触发PWA安装的需求可以实现，但分享外部链接点击直接安装、将PWA上传到云存储后分享链接安装的需求均无法实现。

可实现：网页内嵌自定义PWA安装按钮 #

实现逻辑为捕获浏览器的beforeinstallprompt内置事件，暂存事件实例后绑定到自定义按钮的点击事件即可，示例代码如下：

• 全局监听安装事件，暂存实例并展示自定义按钮

let deferredInstallPrompt = null;
// 浏览器判定站点符合PWA安装标准时会触发该事件
window.addEventListener('beforeinstallprompt', (event) => {
  // 阻止浏览器默认弹出的安装提示
  event.preventDefault();
  // 保存事件实例供后续调用
  deferredInstallPrompt = event;
  // 展示你预先写好的隐藏状态的安装按钮
  document.querySelector('#custom-install-btn').hidden = false;
});

• 绑定按钮点击事件触发安装流程

document.querySelector('#custom-install-btn').addEventListener('click', async () => {
  if (!deferredInstallPrompt) return;
  // 唤起浏览器原生PWA安装弹窗
  deferredInstallPrompt.prompt();
  // 监听用户选择结果
  const choiceResult = await deferredInstallPrompt.userChoice;
  // 事件仅可调用一次，使用后销毁
  deferredInstallPrompt = null;
  // 此处可添加自定义逻辑，比如统计用户安装转化率
});

注意：该按钮仅在用户当前已经在浏览器打开你的PWA站点、且站点符合PWA安装标准时才会生效。

不可实现的需求及原因 #

• 外部渠道分享链接直接安装PWA：PWA的安装触发逻辑由浏览器严格管控，必须满足「用户主动在浏览器打开对应PWA站点」的前置条件，没有开放第三方渠道（即时通讯、邮件）外部链接直接唤起安装的能力，就算你分享的是PWA本身的站点链接，用户点击后也只会先跳转打开网页，不会直接触发安装。
• 上传到云存储分享链接安装PWA：PWA不是独立的可执行安装包，它依托于托管站点的域名、manifest.json配置、Service Worker运行，无法打包为单个文件上传到Google Drive、Dropbox这类云存储，这类云存储的分享链接完全无法触发PWA安装流程。

如果需要实现外部渠道分享后用户点击直接安装的需求，目前仅能通过将PWA打包为TWA上传到Play Store、或适配苹果要求后上传App Store的方案实现。

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