nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

pwa install on phone

Open matthewww-pl opened this issue 1 year ago • 3 comments

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",
    },
  },
});

matthewww-pl avatar Feb 26 '23 20:02 matthewww-pl

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.

userquin avatar Feb 26 '23 21:02 userquin

You can also check the default layout in the playground in the repo

userquin avatar Feb 26 '23 21:02 userquin

thanks,

matthewww-pl avatar Feb 27 '23 13:02 matthewww-pl