如果安装了应用程序，则从 PWA Builder 中隐藏 <pwa-install >Install </pwa-install>

Question

我正在使用新的 web 组件 <pwa-install >Install </pwa-install> 来安装我的 PWA 应用程序版本，并使用 PWA Builder。该按钮效果很好，但我唯一的问题是，如果已经安装了应用程序，我无法让它消失。

我试图隐藏安装按钮，仅在beforeinstallprompt 激活时显示它，但我失败了：

self.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  this.deferredPrompt = e; 
  $("#installbanner").show();
});

我也尝试了appinstalled 方法，但效果不佳。

self.addEventListener('appinstalled', (evt) => {
    app.logEvent("App is installed");
          $("#installbanner").show();
});

我还尝试显示 <pwa-install >Install </pwa-install> 中包含的所有可用方法，但它只显示了 jibrish。

真的很抱歉打扰大家了，请大家帮忙

Answer 1

您可以尝试使用媒体显示查询，例如您可以尝试以下属性之一：

@media all and (display-mode: standalone) {
  pwa-install{
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}