如何在HTML中通过appinstalled事件检测用户成功将PWA安装到设备-html教程-PHP中文网

appinstalled事件已废弃，chrome 68+、firefox、safari、edge均不触发；唯一可靠方案是监听beforeinstallprompt并处理userchoice结果，辅以matchmedia('(display-mode: standalone)')判断ios安装状态。

如何在html中通过appinstalled事件检测用户成功将pwa安装到设备

appinstalled 事件根本不会在大多数浏览器中触发

Chrome 从 68 版本起已移除 appinstalled 事件，Firefox 从未支持，Safari 不支持，Edge（基于 Chromium）同样不触发。你写 window.addEventListener('appinstalled', handler) 后永远收不到回调——这不是代码写错了，是规范废弃+厂商放弃的结果。

目前没有标准、可靠、跨浏览器的 JS 事件能告诉你“安装已完成”。所谓“检测成功安装”，实际只能退而求其次：判断安装条件是否满足 + 用户是否大概率已安装。

用 beforeinstallprompt + userChoice 判断用户是否点了“添加”

beforeinstallprompt 是唯一可捕获的安装前信号，但它只代表“PWA 符合安装条件”，不等于用户真点了确认。真正能反映用户意图的是 userChoice Promise 的结果：

userChoice 返回 {outcome: "accepted"} 表示用户点击了添加按钮（但不保证最终完成安装，比如中途切走或系统失败）
{outcome: "dismissed"} 表示用户关闭了提示或点了取消
该 Promise 在 Chrome 中仅在 beforeinstallprompt 被 preventDefault() 后才可用

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

// 比如绑定到一个“添加到主屏幕”按钮
addBtn.addEventListener('click', () => {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('用户点了添加 —— 这是最接近“安装成功”的信号');
      }
      deferredPrompt = null;
    });
  }
});

通过 matchMedia 检测 iOS 是否处于“已安装”状态

iOS Safari 是特例：它不支持 beforeinstallprompt，但提供 matchMedia('(display-mode: standalone)') 或 matchMedia('(display-mode: minimal-ui)') 来判断当前是否以 PWA 模式运行（即从主屏幕启动）。这虽不是“安装完成通知”，却是唯一能确认用户已添加并再次打开的方式：