Reputation: 3
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
Reputation: 3
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