增加打包为离线web应用配置

capacitor.config.json

@@ -1,5 +1,5 @@
 {
   "appId": "com.pandorastudio.smartisanote",
   "appName": "SmartisanNote",
-  "webDir": "dist"
+  "webDir": "dist/standard"
 }

package.json

@@ -1,12 +1,12 @@
 {
   "name": "smartisannote.vue",
   "version": "1.0.0",
-  "description": "",
+  "description": "锤子便签(重制版)",
   "main": "index.js",
   "scripts": {
     "android": "npx cap run android",
-    "build": "vite build && npx cap sync",
-    "dev":"vite"
+    "build:all": "vite build && vite build --mode pwa",
+    "dev": "vite"
   },
   "keywords": [],
   "author": "",
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
     "less": "^4.4.2",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vite-plugin-pwa": "^1.0.3"
   }
 }

public/icons/icon-512.png

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-512</title>
+    <g id="icon-512" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#42b883" x="0" y="0" width="512" height="512" rx="100"></rect>
+        <text id="S" font-family="Arial-BoldMT, Arial" font-size="300" font-weight="bold" fill="#FFFFFF">
+            <tspan x="180" y="330">S</tspan>
+        </text>
+    </g>
+</svg>

vite.config.js

@@ -1,25 +1,99 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': '/src'
-    }
-  },
-  server: {
-    port: 3000
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        // 为CSS和JS文件添加哈希后缀
-        entryFileNames: 'assets/[name].[hash].js',
-        chunkFileNames: 'assets/[name].[hash].js',
-        assetFileNames: 'assets/[name].[hash].[ext]'
-      }
-    }
+export default defineConfig(({ mode }) => {
+  const isPwaMode = mode === 'pwa'
+
+  const plugins = [vue()]
+
+  // 只在PWA模式下添加PWA插件
+  if (isPwaMode) {
+    plugins.push(
+      VitePWA({
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: false,
+        },
+        manifest: {
+          name: '锤子便签',
+          short_name: '便签',
+          description: '锤子便签(重制版)',
+          theme_color: '#42b883',
+          start_url: '/',
+          display: 'standalone',
+          background_color: '#ffffff',
+          icons: [
+            {
+              src: 'icons/icon-192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'icons/icon-512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+          ],
+        },
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,wasm,png,jpg,jpeg,svg,ico}'],
+          runtimeCaching: [
+            {
+              urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'google-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+            {
+              urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'gstatic-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+          ],
+        },
+      })
+    )
   }
-})
+
+  return {
+    plugins,
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+    server: {
+      port: 3000,
+    },
+    build: {
+      outDir: isPwaMode ? 'dist/offline' : 'dist/standard',
+      rollupOptions: {
+        output: {
+          // 为CSS和JS文件添加哈希后缀
+          entryFileNames: 'assets/[name].[hash].js',
+          chunkFileNames: 'assets/[name].[hash].js',
+          assetFileNames: 'assets/[name].[hash].[ext]',
+        },
+      },
+    },
+  }
+})