showInstallPrompt not being called

[taylorchance]

I was hooking up my install button something like this:

v-if="$pwa && $pwa.showInstallPrompt && !$pwa.needRefresh"

I know the beforeinstallprompt listener can be finicky so I just waited it out. Finally I put the listeners in manually like so:

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault()
  // Stash the event so it can be triggered later.
  deferredPrompt.value = e
})

window.addEventListener('appinstalled', () => {
  deferredPrompt.value = null
})

const installApp = () => {
  deferredPrompt.value?.prompt()
}```

And the button is showing now.

[jeky1950]

Try adding this to your nuxt.config.ts:

export default defineNuxtConfig({
     ...
     pwa: {
        devOptions: {
            enabled: true
        },
        client: {
            installPrompt: true
        },
    }
})

[jithureddy]

Similar issue for me as well, and I have the nuxt.config.ts, with above two options are enabled

[userquin]

showInstallPrompt should be true when the service worker is installed and activated (no errors in the registration) and the browser supports the beforeinstallprompt event (right now only some Chromium based browser, iirc Arc and Brave don't support it).

You can try using @vite-pwa/create-pwa, select Vue then Nuxt or Nuxt 4 and follow the prompts.

[tianzhich]

I have a similar issue. I see that our pwa client support beforeinstallprompt listener and i try to use it. But the event seems never be triggered (only trigger 2-3 times while i refresh my page 10+ times). And there are another issue, even after I click a button to call the $pwa.install(). The error throws:

NotAllowedError: Failed to execute 'prompt' on 'BeforeInstallPromptEvent': The prompt() method must be called with a user gesture

Here is the corresponding source code of our pwa client. I have no idea what happens.

  if (!hideInstall.value) {
    let deferredPrompt;
    const beforeInstallPrompt = (e) => {
      e.preventDefault();
      deferredPrompt = e;
      showInstallPrompt.value = true;
    };
    window.addEventListener("beforeinstallprompt", beforeInstallPrompt);
    window.addEventListener("appinstalled", () => {
      deferredPrompt = void 0;
      showInstallPrompt.value = false;
    });
    cancelInstall = () => {
      deferredPrompt = void 0;
      showInstallPrompt.value = false;
      window.removeEventListener("beforeinstallprompt", beforeInstallPrompt);
      hideInstall.value = true;
      localStorage.setItem(installPrompt, "true");
    };
    install = async () => {
      if (!showInstallPrompt.value || !deferredPrompt) {
        showInstallPrompt.value = false;
        return;
      }
      showInstallPrompt.value = false;
      await nextTick();
      deferredPrompt.prompt();
      await deferredPrompt.userChoice;
    };
  }

[userquin]

The sw needs to be installed, once installed the beforeibstallprompt should be called. When the sw finish download the precache manifest assets (offline support) the showInstallPrompt should be activated (the sw must be green in the dev tools).

About the error, what browser are you using?

[tianzhich]

Thanks for the clarify. I'm using Chrome (Version 130.0.6723.59) on MacOS 14.6.1. I'm sure I enabled the pwa in the dev mode so I think the sw could work.

[userquin]

I dont use macOS, if chrome still using webkit will not work, try on Safari but iirc won't work

[tianzhich]

I dont use macOS, if chrome still using webkit will not work, try on Safari but iirc won't work

Chrome in macOS using blink (chromium). It using webkit on mobile devices such as iOS or iPadOS.