Nuxt 3中beforeinstallprompt事件未触发的排查求助

大家好，我正在本地开发一个Nuxt 3的PWA应用，遇到了beforeinstallprompt事件不触发的问题。我已经配置了Service Worker和Web App Manifest，浏览器控制台也没有报错，下面是我处理PWA安装的composable代码：

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<{ outcome: 'accepted' | 'dismissed' }>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
}

export function usePwaInstall() {
  const installPrompt = ref<BeforeInstallPromptEvent | null>(null);
  const showInstallButton = ref(false);
  const isAppInstalled = ref(false);

  const checkIfInstalled = () => {
    return window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone;
  };

  const showInstallPrompt = async () => {
    if (!installPrompt.value) return;
    try {
      await installPrompt.value.prompt();
      const { outcome } = await installPrompt.value.userChoice;
      if (outcome === 'accepted') isAppInstalled.value = true;
    } finally {
      installPrompt.value = null;
      showInstallButton.value = false;
    }
  };

  onMounted(() => {
    isAppInstalled.value = checkIfInstalled();

    const handler = (e: Event) => {
      e.preventDefault();
      installPrompt.value = e as BeforeInstallPromptEvent;
      showInstallButton.value = true;
    };

    const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    if ((isLocalhost || window.location.protocol === 'https:') && 'serviceWorker' in navigator && navigator.serviceWorker.controller) {
      window.addEventListener('beforeinstallprompt', handler);
    } else {
      console.warn('PWA conditions not met:', {
        isSecure: isLocalhost || window.location.protocol === 'https:',
        hasServiceWorker: 'serviceWorker' in navigator,
        serviceWorkerActive: !!navigator.serviceWorker.controller
      });
    }

    window.addEventListener('appinstalled', () => {
      isAppInstalled.value = true;
      showInstallButton.value = false;
      console.log('PWA installed');
    });

    console.log('PWA conditions check:', {
      isStandalone: window.matchMedia('(display-mode: standalone)').matches,
      isSecure: isLocalhost || window.location.protocol === 'https:',
      hasServiceWorker: 'serviceWorker' in navigator
    });
  });

  return {
    installPrompt,
    showInstallButton,
    showInstallPrompt,
    isAppInstalled
  };
}

当前状态信息 #

• Service Worker状态（来自Chrome DevTools -> Application -> Service Workers）：
  sw.js 已接收，状态为「activated and is running」
• Web App Manifest（manifest.json）：

{
  "name": "Yourgood.CRM",
  "short_name": "Yourgood.CRM",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1b1b1b",
  "lang": "en",
  "scope": "/",
  "description": "Yourgood.CRM",
  "theme_color": "#1b1b1b",
  "icons": [
    {
      "src": "/icons/icon1.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "screenshots": [
    {
      "src": "/icons/icon1.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

我已经确认icon1.png存在于/icons/icon1.png路径，尺寸是512x512像素，并且manifest已经正确链接到index.html（在DevTools中已验证）。之前担心manifest有问题，我还试过替换成一个已知能触发该事件的manifest，但还是没用。

已经尝试过的排查步骤 #

• 安全上下文：运行在localhost，属于安全上下文
• Service Worker注册/激活：在DevTools中确认已经「activated and running」
• Manifest验证：在DevTools -> Application -> Manifest中检查，无报错
• 监听器位置：事件监听器在onMounted中设置，组件生命周期中已经足够早，这个composable是在页面级别使用的
• 交互触发：多次刷新页面、和页面交互、长时间打开页面，尝试触发浏览器的安装提示逻辑
• 清除缓存：通过DevTools -> Application -> Clear storage多次清除站点数据（包括Service Worker和缓存）
• 浏览器环境：使用Chrome 125.0.6422.142版本

我的问题 #

基于以上情况，为什么beforeinstallprompt事件还是不触发呢？有没有什么我可能忽略的不太明显的要求，尤其是关于manifest的icons数组的，哪怕DevTools没报错？希望大家能给我一些排查思路或者调试建议！

更新：我已经解决了这个问题
我只需要在nuxt.config.ts里添加这个配置就搞定了：

pwa: {
  client: {
    installPrompt: true, // <--- 就是加这个属性
  },
  // ... 其他PWA相关配置
}

内容来源于stack exchange