$pwa.showInstallPrompt always false? about nuxt HOT 14 CLOSED

@userquin I tried reproducing the issue on a new nuxt project but am unable to and unfortunately I can't share the actual repo. Lets just consider this issue resolved 🙏

from nuxt.

@ampharino weird, are you testing in Chrome (or any Chromium based browser, not all browsers support this feature)? The PWA must not be installed: https://github.com/vite-pwa/nuxt/blob/main/templates/pwa.client.ts#L95.

FYI: Elk's custom PWA module was pulled here with the help of Daniel

from nuxt.

@userquin I'm testing in chrome. I can confirm that the PWA is not installed. $pwa.isInstalled is returning the correct value.
I can get the prompt to show if I do <PwaInstallPrompt v-if="!$pwa.isInstalled"/>

from nuxt.

You need to add the webmanifest and check the service worker is Green in dev tools.

from nuxt.

@userquin Service worker is green and the app is installable. I'm just using the auto generated service worker

from nuxt.

Your pwa manifest seems to not have icons entry, you need at least 2 icons: 192×192 and 512×512

from nuxt.

@userquin I do have an icons entry.

Maybe related, but if I do a hard refresh nuxt gives me a 500 error

[3:15:02 PM] [Vue warn]: Property "$pwa" was accessed during render but is not defined on instance.
[3:15:02 PM] [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'showInstallPrompt')
  at _sfc_ssrRender (./pages/[locale]/index.vue:62:17)
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:683:9)
  at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:25
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:870:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:875:16)

from nuxt.

Use "$pwa?.<prop>"

from nuxt.

Ah ok thank you that fixes the hard refresh issue

from nuxt.

Could not reproduce the issue with the same pwa config in a fresh nuxt 3 project 🤔

from nuxt.

@userquin I could get it working briefly. I deleted <VitePwaManifest/> from app.vue, wait for hmr update and then add it back and wait for hmr update again it works. However if I refresh the page after this, it no longer works. Only difference I've found is that there are two web manifests when its working.

Any ideas?

Here is my app.vue. template

<template>
  <NuxtLayout>
    <VitePwaManifest/>
    <div>
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

from nuxt.

@ampharino can you share a minimal repo?

from nuxt.

I was able to resolve the issue and get everything working by wrapping <VitePwaManifest/> inside <ClientOnly> nuxt component. Let me know if you still want a minimal repo for further investigation

from nuxt.

@ampharino it is weird, I'll check it on a new nuxt project, but the virtual used in the component should be ok with SSR

EDIT: can you provide the repo 🙏 ?

from nuxt.