PWA not enable with vite-plugin-pwa on Nuxt

I just configured my application with the VitePWA module, I added some configuration according to the website documentation , I added some icons and added the <NuxtPwaManifest> tag in app.vue and when I run npm run dev I don't get any error messages but it also doesn't run my PWA in Chrome Browser. did I miss any configuration?

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: false },
  modules: [
    '@nuxt/ui',
    '@vite-pwa/nuxt',

    //masukan module nuxt ui jika ingin menggunakan nuxtui tailwindcss dll sudah otomatis tinggal styling saja di index.vue
  ],
  colorMode:{
    preference:'light',

  },
  pwa:{
    manifest:{
      name:'app test',
      short_name:'app test',
      description:'app yang dibuat untuk pwa',
      lang:'en',
      orientation:'portrait',
      icons:[
        {
          src:'assets/img/android-launchericon-48-48.png',
          sizes:'48*48',
          type:'image/png',
        },
        {
          src:'assets/img/android-launchericon-72-72.png',
          sizes:'72*72',
          type:'image/png',
        },
        {
          src:'assets/img/android-launchericon-96-96.png',
          sizes:'96*96',
          type:'image/png',
        },
        {
          src:'assets/img/android-launchericon-144-144.png',
          sizes:'144*144',
          type:'image/png',
        },
        {
          src:'assets/img/android-launchericon-192-192.png',
          sizes:'192*192',
          type:'image/png',
        },
        {
          src:'assets/img/android-launchericon-512-512.png',
          sizes:'512*512',
          type:'image/png',
        },

      ]
    }
  }
})

app.vue

<template>
  <div>
    <NuxtPwaManifest/>
    <NuxtPage/>
  <div>
</template>

im trying help with ChatGPT but i didnt get properly solution

Upvotes: 0

Views: 911

Answers (1)

i fixed my code now it works, i forgot to add autoUpdate and use x instead of * for resolution and move them into public folder

    pwa:{
    registerType:'autoUpdate',
    manifest:{
      name:'app test',
      short_name:'app test',
      description:'app yang dibuat untuk pwa',
      lang:'en',
      orientation:'portrait',
      icons:[
        {
          src:'android-launchericon-48-48.png',
          sizes:'48x48',
          type:'image/png',
        },
        {
          src:'android-launchericon-72-72.png',
          sizes:'72x72',
          type:'image/png',
        },
        {
          src:'android-launchericon-96-96.png',
          sizes:'96x96',
          type:'image/png',
        },
        {
          src:'android-launchericon-144-144.png',
          sizes:'144x144',
          type:'image/png',
        },
        {
          src:'android-launchericon-192-192.png',
          sizes:'192x192',
          type:'image/png',
        },
        {
          src:'android-launchericon-512-512.png',
          sizes:'512x512',
          type:'image/png',
        },

      ],
    },
  },

Upvotes: 0

Related Questions