以前让用户装 PWA 要靠地址栏那个小图标，今天我自己来——navigator.install() 把这件事彻底变了

用户装 PWA 只能靠浏览器地址栏那个小图标，很多用户根本不知道它在哪——这事情困扰了开发者好多年。现在 Chrome 和 Edge 终于给了一个可以在代码里直接触发的 API，navigator.install()，让 PWA 安装变成了一件可以主动推送的事。

以前怎么做？beforeinstallprompt 事件

在 Web Install API 出现之前，开发者能做的就是在恰当的时机（比如用户使用了 App 核心功能后）把 beforeinstallprompt 事件存起来，然后在某个按钮点击时调出浏览器原生的安装提示。大致的流程是这样：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallButton();
});

installBtn.addEventListener('click', async () => {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    deferredPrompt = null;
  }
});

这个方案有两个核心问题：一是 beforeinstallprompt 事件触发的时机完全由浏览器控制，什么时候能存到 deferredPrompt 开发者管不了；二是即使存到了，用户点不点安装按钮依然是不确定的，开发者无法主动触发。

navigator.install() 做了什么

Web Install API 在 Chrome 143+ 和 Edge 143+ 中进入了 Origin Trial 阶段，核心就是一个新方法：navigator.install()。它允许开发者在任何用户交互中直接触发 PWA 的安装提示——不需要等浏览器自动弹出，也不需要提前存 beforeinstallprompt。

const installBtn = document.getElementById('install');

installBtn.addEventListener('click', async () => {
  try {
    const result = await navigator.install();
    console.log('安装成功', result.manifestId);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('用户取消了安装');
    } else if (err.name === 'DataError') {
      console.log('未找到 Web App Manifest');
    }
  }
});

安装成功后，promise 会解析出一个 manifestId；如果用户拒绝，会抛出 AbortError；如果当前页面没有有效的 Web App Manifest，会抛出 DataError。隐私模式下调用同样会拒绝 promise。

浏览器兼容性

目前 Chrome 和 Edge 143+ 原生支持；139–142 版本可以通过 about:flags 手动开启；Safari 和 Firefox 会忽略这个调用，开发者不需要额外处理，降级方案就是继续使用各自浏览器已有的「添加到主屏幕」流程。

有一点需要注意：目前这个 API 只能安装当前浏览的页面，跨站点的安装能力还在 WICG 中讨论中。这意味着你只能在自己的域名下触发自己 PWA 的安装，而不能做一个页面同时安装其他网站的应用。

怎么用最合理

这个 API 的设计目标不是让每个页面都弹安装提示，而是让开发者能够在更合适的时机主动推动安装。一个典型的场景是：用户在 App 里完成了某个有价值的行为（比如完成注册、生成了第一条内容、体验了核心功能），这时候弹出安装提示，转化率会比用户刚进站就弹高得多。

async function checkInstallAbility() {
  if (!navigator.install) return false;
  try {
    await navigator.install();
    return false;
  } catch (err) {
    if (err.name === 'DataError') {
      return false;
    }
    return true;
  }
}

加上 feature detection，让没有这个 API 的浏览器优雅降级。

这件事意味着什么

Web Install API 是 PWA 走向「真正应用分发」的一个信号。它让 PWA 的安装从被动等用户发现，变成开发者可以主动推动的一件事——更像应用商店的逻辑了。虽然目前能力还有限（只能装当前站），但 Firefox 和 Safari 都已经在 W3C WebApps 工作组表示了推进意向，标准化的方向是确定的。

如果你现在就在做 PWA，建议先把 beforeinstallprompt 方案保留作为降级，同时加上 navigator.install() 的检测和主动触发——两步走，不吃亏。