chore: 优化 pwa 配置

un-pany · pany-ang · Mar 1, 2025 · Feb 23, 2025 · Feb 23, 2025 · Feb 23, 2025
commit c9d2d950a33d95e2a8cf33b9a610a8fb9dfee9a1
diff --git a/index.html b/index.html
@@ -9,8 +9,8 @@
     <link rel="icon" href="/favicon.png" type="image/png" />
     <link rel="stylesheet" href="/app-loading.css" />
     <title>%VITE_APP_TITLE%</title>
-    <link rel="mask-icon" href="/favicon.png" />
-    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+    <!-- 必须和 manifest 中的 theme_color 保持一致 -->
     <meta name="theme-color" content="#1989fa" />
   </head>
 

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/vite.config.ts b/vite.config.ts
@@ -125,9 +125,11 @@ export default defineConfig(({ mode }) => {
       }),
       VitePWA({
         registerType: "autoUpdate",
+        includeAssets: ["favicon.png"],
         manifest: {
           name: "MOBVUE",
           short_name: "MOBVUE",
+          description: "A crafted mobile template / vue mobile / vue h5 / vue vant / vue web app",
           theme_color: "#1989fa",
           icons: [
             {
@@ -139,6 +141,12 @@ export default defineConfig(({ mode }) => {
               src: "pwa-512x512.png",
               sizes: "512x512",
               type: "image/png"
+            },
+            {
+              src: "pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: ["any", "maskable"]
             }
           ]
         },