pwa added

app.vue

@@ -1,5 +1,6 @@
 <template>
   <ion-app>
+    <VitePwaManifest />
     <ion-router-outlet />
-  </ion-app>
+  </ion-app>  
 </template>

nuxt.config.ts

@@ -1,9 +1,62 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  css: ['~/assets/css/main.css'],
-  devtools: { enabled: false },
-  modules: ['@nuxtjs/ionic'],
   ssr: false,
+  devtools: { enabled: false },
+  css: ["~/assets/css/main.css"],
+  modules: ["@nuxtjs/ionic", "@vite-pwa/nuxt"],
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => ['VitePwaManifest'].includes(tag),
+    },
+  },
+  pwa: {
+    manifest: {
+      short_name: "LedWall",
+      name: "LedWall - Free Spirit",
+      description: "An app to control the led wall",
+      theme_color: '#ff6909',
+      background_color: '#23a7e4',
+      // background_color: '#ff6909',
+      icons: [
+        {
+          src: "icons/pwa-64x64.png",
+          sizes: "64x64",
+          type: "image/png",
+        },
+        {
+          src: "icons/pwa-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: 'icons/pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          src: "icons/pwa-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any",
+        },
+        {
+          src: "icons/maskable-icon-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "maskable",
+        },
+      ],
+    },
+    client: {
+      installPrompt: true,
+    },
+    registerWebManifestInRouteRules: true,
+    devOptions: {
+      enabled: true,
+      navigateFallbackAllowlist: [/^\/$/],
+    },
+    registerType: "autoUpdate",
+  },
   postcss: {
     plugins: {
       tailwindcss: {},