使用 beforeinstallprompt PWA 安装应用程序或添加到主屏幕无法触发超过 1 次

Question

我正在开发 PWA，我想添加按钮来触发 A2HS 对话框，如下图所示。

我发现我只能触发它1次，我需要清除我的chrome数据才能再次触发该事件。我想每次用户单击主屏幕上的安装按钮时显示此对话框。如何多次显示弹出窗口。

我希望用户可以查看我制作的促销安装按钮，以触发多次弹出“添加到主屏幕”。

Answer 1

您可以保存该事件并在以后多次使用。 这里有解释。

我使用 React 和 zustand 作为状态管理器。我将事件保存到商店中

    /* Saves PWA install prompt for future usage */
    window.addEventListener('beforeinstallprompt', (event) => {
      event.preventDefault();
      useMyStore.setState({ pwaInstallPrompt: event });
    });

然后在我的自定义 InstallPwaModal 组件中执行以下操作：

    const { pwaInstallPrompt, setIsPwaInstallModalOpen } = useMyStore((state) => ({
      pwaInstallPrompt: state.pwaInstallPrompt,
      setIsPwaInstallModalOpen: state.setIsPwaInstallModalOpen,
    }));

    const handleInstallButtonClick = async () => {
      const result = await pwaInstallPrompt.prompt();
      setIsPwaInstallModalOpen(result.outcome !== 'accepted');
    };