nuxt
nuxt copied to clipboard
pwa install on phone
Hello, nuxt version 3.2.0, on mobile not working install function, on desktop it's ok. maybe i'm doing something wrong?
App.vue
<template>
<div>
<VitePwaManifest />
<div>welcome</div>
<button @click="$pwa.install">Install</button>
</div>
</template>
<script setup lang="ts"></script>
nuxt.config.js
pwa: {
registerType: "autoUpdate",
includeAssets: ["favicon.ico"],
workbox: { navigateFallback: null },
client: {
installPrompt: true,
},
manifest: {
name: "aaa",
short_name: "aaa",
description: "aaa",
theme_color: "#ffffff",
icons: [
{
src: "icon64.png",
sizes: "64x64",
type: "image/png",
},
{
src: "icon144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "icon192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "icon512.png",
sizes: "512x512",
type: "image/png",
},
],
},
devOptions: {
enabled: true,
type: "module",
},
},
});
You cannot install pwa, you should check if th3 browser supports it, check this component: https://github.com/elk-zone/elk/blob/main/components/pwa/PwaInstallPrompt.client.vue
When showInstallPrompt
is true you can show the button calling install fn on click.
You can also check the default layout in the playground in the repo
thanks,