✨ Implement PWA support

app.vue

@@ -1,4 +1,5 @@
 <template>
+    <VitePwaManifest/>
     <NuxtLayout>
         <NuxtPage />
     </NuxtLayout>

nuxt.config.ts

@@ -1,43 +1,86 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  ssr: true,
-  devtools: {enabled: true},
+    ssr: true,
+    devtools: {enabled: true},
 
-  modules: [
-      "@nuxtjs/tailwindcss",
-      "shadcn-nuxt",
-      "@nuxt/eslint",
-      "@nuxtjs/color-mode",
-      "nuxt-icon",
-      "@nuxt/image"
-  ],
+    modules: [
+        "@nuxtjs/tailwindcss",
+        "shadcn-nuxt",
+        "@nuxt/eslint",
+        "@nuxtjs/color-mode",
+        "nuxt-icon",
+        "@nuxt/image",
+        "@vite-pwa/nuxt"
+    ],
 
-  shadcn: {
-      prefix: "",
-      componentDir: "./components/ui"
-  },
+    shadcn: {
+        prefix: "",
+        componentDir: "./components/ui"
+    },
 
-  colorMode: {
-      preference: "system",
-      fallback: "dark",
-      classSuffix: ""
-  },
+    colorMode: {
+        preference: "system",
+        fallback: "dark",
+        classSuffix: ""
+    },
 
-  tailwindcss: {
-      cssPath: [
-          "~/assets/css/index.css",
-          {injectPosition: 0}
-      ],
-      configPath: "tailwind.config.ts",
-      exposeConfig: false,
-      viewer: true,
-  },
+    tailwindcss: {
+        cssPath: [
+            "~/assets/css/index.css",
+            {injectPosition: 0}
+        ],
+        configPath: "tailwind.config.ts",
+        exposeConfig: false,
+        viewer: true,
+    },
 
-  app: {
-      head: {
-          link: [{rel: "icon", type: "image/svg+xml", href: "/logo.svg"}]
-      }
-  },
+    app: {
+        head: {
+            link: [{rel: "icon", type: "image/svg+xml", href: "/logo.svg"}]
+        }
+    },
 
-  compatibilityDate: "2024-10-12"
-});
+    pwa: {
+        manifest: {
+            name: "Open Webtoon Reader",
+            short_name: "OWR",
+            description: "An open-source webtoon reader",
+            theme_color: "#020817",
+            screenshots: [
+                {
+                    src: "/screenshot.png",
+                    type: "image/png",
+                    sizes: "1919x915",
+                    form_factor: "wide"
+                },
+                {
+                    src: "/screenshot.png",
+                    type: "image/png",
+                    sizes: "1919x915",
+                    form_factor: "narrow"
+                }
+            ],
+            icons: [
+                {
+                    src: "/logo-192.webp",
+                    sizes: "192x192",
+                    type: "image/webp"
+                },
+                {
+                    src: "/logo-512.webp",
+                    sizes: "512x512",
+                    type: "image/webp"
+                }
+            ],
+        },
+        workbox: {
+            navigateFallback: "/",
+        },
+        devOptions: {
+            enabled: true,
+            type: "module",
+        }
+    },
+
+    compatibilityDate: "2024-10-12"
+});

package.json

@@ -16,6 +16,7 @@
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/color-mode": "^3.4.1",
     "@vee-validate/zod": "^4.13.1",
+    "@vite-pwa/nuxt": "^0.10.5",
     "@vueuse/core": "^10.10.0",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",