feat: add pwa

KeJunMao · Mar 22, 2023 · 9c86c8e · 9c86c8e
1 parent 8b43fb0
commit 9c86c8e
Show file tree

Hide file tree

Showing 4 changed files with 1,958 additions and 28 deletions.
diff --git a/app.vue b/app.vue
@@ -14,8 +14,9 @@ useSeoMeta({
 
 <template>
   <AppLayout>
+    <VitePwaManifest />
+    <NuxtLoadingIndicator></NuxtLoadingIndicator>
     <NuxtLayout>
-      <NuxtLoadingIndicator></NuxtLoadingIndicator>
       <NuxtPage></NuxtPage>
     </NuxtLayout>
   </AppLayout>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -4,6 +4,37 @@ import { i18n } from "./config/i18n";
 
 export default defineNuxtConfig({
   app: {
+    head: {
+      link: [
+        {
+          rel: "apple-touch-icon",
+          href: "/apple-touch-icon.png",
+        },
+        {
+          rel: "icon",
+          href: "/favicon.ico",
+        },
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "16x16",
+          href: "/favicon-16x16.png",
+        },
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "32x32",
+          href: "/favicon-32x32.png",
+        },
+      ],
+      meta: [
+        {
+          name: "theme-color",
+          content: "#ffffff",
+        },
+      ],
+    },
+
     pageTransition: { name: "page", mode: "out-in" },
     layoutTransition: { name: "layout", mode: "out-in" },
   },
@@ -27,6 +58,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "@sidebase/nuxt-auth",
     "nuxt-gtag",
+    "@vite-pwa/nuxt",
   ],
   css: ["@/assets/scss/index.scss", "@unocss/reset/tailwind.css"],
   colorMode: {
@@ -47,4 +79,40 @@ export default defineNuxtConfig({
     importStyle: "scss",
     components: ["ElInput", "ElSelect", "ElOption"],
   },
+  pwa: {
+    registerType: "autoUpdate",
+    manifest: {
+      name: "AI Anything",
+      short_name: "AIAnything",
+      theme_color: "#ffffff",
+      icons: [
+        {
+          src: "android-chrome-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: "android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+        },
+        {
+          src: "android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable",
+        },
+      ],
+      display: "standalone",
+    },
+    workbox: {
+      navigateFallback: "/",
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+    },
+    registerWebManifestInRouteRules: true,
+    devOptions: {
+      enabled: true,
+      type: "module",
+    },
+  },
 });
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@types/marked": "^4.0.8",
     "@types/uuid": "^9.0.1",
     "@unocss/nuxt": "^0.50.4",
+    "@vite-pwa/nuxt": "^0.0.7",
     "@vueuse/nuxt": "^9.13.0",
     "bumpp": "^9.0.0",
     "nuxt": "^3.3.1",