$pwa.showInstallPrompt always false?
ampharino opened this issue · comments
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,
},
}
@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
@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"/>
You need to add the webmanifest and check the service worker is Green in dev tools.
@userquin Service worker is green and the app is installable. I'm just using the auto generated service worker
Your pwa manifest seems to not have icons entry, you need at least 2 icons: 192×192 and 512×512
@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)
Use "$pwa?.<prop>"
Ah ok thank you that fixes the hard refresh issue
Could not reproduce the issue with the same pwa config in a fresh nuxt 3 project 🤔
@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>
@ampharino can you share a minimal repo?
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
@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 🙏 ?
@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 🙏