Hide <pwa-install >Install </pwa-install> from PWA Builder if the app is installed

Question

I am using the new webcomponent <pwa-install >Install </pwa-install> to install my PWA app build using PWA Builder. The button works well but the only problem I have is that I cant make it to disappear if the app has already been installed.

I have tried to hide the install button and only show it when the beforeinstallprompt is activate but I failed with that:

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

I also tried the appinstalled method, that did not work as well.

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

I also tried displaying all the available methods that are contained within the <pwa-install >Install </pwa-install> but it just showed jibrish.

I am really sorry to bug everyone, may you please kindly assist

Answer 1

you can try using media display query, for example you can try one of the following properties:

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