feat: support PWA

index.html

@@ -6,6 +6,9 @@
       name="viewport"
       content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
+    <meta name="description" content="A crafted mobile template" />
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="icon" href="/favicon.png" type="image/png" />
     <link rel="stylesheet" href="/app-loading.css" />
     <title>%VITE_APP_TITLE%</title>

package.json

@@ -51,6 +51,7 @@
     "unplugin-auto-import": "19.1.1",
     "unplugin-vue-components": "28.4.1",
     "vite": "6.2.0",
+    "vite-plugin-pwa": "0.21.1",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.0.7",
     "vue-tsc": "2.2.6"

public/robota.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

tsconfig.json

@@ -22,7 +22,7 @@
       "@@/*": ["src/common/*"]
     },
     "resolveJsonModule": true,
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-pwa/client"],
     // 允许导入 .ts .mts .tsx 拓展名的文件
     "allowImportingTsExtensions": true,
     // 允许 JS

vite.config.ts

@@ -8,6 +8,7 @@ import UnoCSS from "unocss/vite"
 import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
 import { defineConfig, loadEnv } from "vite"
+import { VitePWA } from "vite-plugin-pwa"
 import svgLoader from "vite-svg-loader"
 
 // Configuring Vite: https://cn.vite.dev/config
@@ -121,6 +122,34 @@ export default defineConfig(({ mode }) => {
       Components({
         dts: "types/auto/components.d.ts",
         resolvers: [VantResolver()]
+      }),
+      // PWA
+      VitePWA({
+        includeAssets: ["favicon.png", "apple-touch-icon.png"],
+        manifest: {
+          name: "MobVue",
+          short_name: "MobVue",
+          description: "A crafted mobile template",
+          theme_color: "#ffffff",
+          icons: [
+            {
+              src: "pwa-192x192.png",
+              sizes: "192x192",
+              type: "image/png"
+            },
+            {
+              src: "pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png"
+            },
+            {
+              src: "pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: ["any", "maskable"]
+            }
+          ]
+        }
       })
     ],
     // Configuring Vitest: https://cn.vitest.dev/config