$pwa.showInstallPrompt always false?

[ampharino]

I'm building a Nuxt 3 app and would like to show an install prompt if the user has not installed the PWA yet. From reading the docs, my understanding is that I could just check the value of $pwa.showInstallPrompt like the way elk does it to determine whether to show the prompt. However, it seems like the value is always false. What am I missing?

<template>
    ...
    <PwaInstallPrompt v-if="$pwa.showInstallPrompt"/>
    ...
<template>

Here's my pwa config in nuxt.config.ts.

pwa: {
    manifest: {
      name: 'Codashop',
      short_name: 'Codashop',
      start_url: '/?utm_source=pwa',
      icons,
      display: 'standalone',
      orientation: 'portrait',
      background_color: '#280031',
      theme_color: '#280031',
    },
    devOptions: { enabled: true, type: 'module' },
    client: {
      installPrompt: true,
    },
  }

[userquin]

@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

[ampharino]

@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"/>

[userquin]

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

[ampharino]

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

[userquin]

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

[ampharino]

@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)

[userquin]

Use "$pwa?.<prop>"

[ampharino]

Ah ok thank you that fixes the hard refresh issue

[ampharino]

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

[ampharino]

@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>

[userquin]

@ampharino can you share a minimal repo?

[ampharino]

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

[userquin]

@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 🙏 ?

[ampharino]

@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 🙏