vite-pwa / nuxt

Zero-config PWA Plugin for Nuxt 3
https://vite-pwa-org.netlify.app/frameworks/nuxt
MIT License
450 stars 22 forks source link

showInstallPrompt not being called #130

Open taylorchance opened 6 months ago

taylorchance commented 6 months ago

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 commented 5 months ago

Try adding this to your nuxt.config.ts:

export default defineNuxtConfig({
     ...
     pwa: {
        devOptions: {
            enabled: true
        },
        client: {
            installPrompt: true
        },
    }
})
jithureddy commented 3 months ago

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

userquin commented 3 months ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

tianzhich commented 2 weeks ago

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.