✨ chrome PWA 支持.

orion-visor-ui/config/plugin/pwa.ts

@@ -0,0 +1,131 @@
+import type { VitePWAOptions } from 'vite-plugin-pwa';
+import { VitePWA } from 'vite-plugin-pwa';
+import { isProductionMode } from '../utils';
+
+/**
+ * 配置 pwa
+ */
+export default function configPwaPlugin() {
+  if (isProductionMode()) {
+    // 生产启用
+    return VitePWA(enabled());
+  } else {
+    // 本地禁用
+    return VitePWA(disabled());
+  }
+}
+
+// 禁用
+const disabled = (): Partial<VitePWAOptions> => {
+  return {
+    disable: true,
+    manifest: false,
+    selfDestroying: true,
+    devOptions: {
+      enabled: false,
+      disableRuntimeConfig: true,
+    },
+  };
+};
+
+// 启用
+const enabled = (): Partial<VitePWAOptions> => {
+  return {
+    manifest: {
+      name: 'Orion Visor Community',
+      short_name: 'Orion Visor',
+      description: '一款高颜值、现代化的智能运维&轻量堡垒机平台。',
+      theme_color: '#212529',
+      icons: [{
+        src: 'logo_150.png',
+        sizes: '150x150',
+        type: 'image/png',
+      }],
+    },
+    registerType: 'autoUpdate',
+    workbox: {
+      // 缓存相关静态资源
+      globPatterns: ['**/*.{js,css,html,ico,png,jpg,svg}'],
+      // 配置自定义运行时缓存
+      runtimeCaching: [
+        isProductionMode()
+          ? {
+            urlPattern: ({ url }) => url.origin === 'https://app-api.id',
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'wisbayar-api',
+              cacheableResponse: {
+                statuses: [200]
+              }
+            }
+          } : {
+            urlPattern: ({ url }) => url.origin === 'https://app-api-0.com',
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'wisbayar-api',
+              cacheableResponse: {
+                statuses: [200]
+              }
+            }
+          },
+        {
+          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'wisbayar-images',
+            expiration: {
+              // 最多30个图
+              maxEntries: 30
+            }
+          }
+        },
+        {
+          urlPattern: /.*\.js.*/,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'wisbayar-js',
+            // 最多缓存30个, 超过的按照LRU原则删除
+            expiration: {
+              maxEntries: 30,
+              maxAgeSeconds: 7 * 24 * 60 * 60
+            },
+            cacheableResponse: {
+              statuses: [200]
+            }
+          }
+        },
+        {
+          urlPattern: /.*\.css.*/,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'wisbayar-css',
+            expiration: {
+              maxEntries: 20,
+              maxAgeSeconds: 7 * 24 * 60 * 60
+            },
+            cacheableResponse: {
+              statuses: [200]
+            }
+          }
+        },
+        {
+          urlPattern: /.*\.html.*/,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'wisbayar-html',
+            expiration: {
+              maxEntries: 20,
+              maxAgeSeconds: 7 * 24 * 60 * 60
+            },
+            cacheableResponse: {
+              statuses: [200]
+            }
+          }
+        }
+      ]
+    },
+    devOptions: {
+      enabled: true,
+    },
+  };
+};

orion-visor-ui/config/utils/index.ts

@@ -1,8 +1,15 @@
+export default {};
+
 /**
  * 是否生成打包报告
  */
-export default {};
-
 export function isReportMode(): boolean {
   return process.env.REPORT === 'true';
 }
+
+/**
+ * 是否为生产模式
+ */
+export function isProductionMode(): boolean {
+  return process.env.NODE_ENV === 'production';
+}

orion-visor-ui/config/vite.config.base.ts

@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import svgLoader from 'vite-svg-loader';
 import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
+import configPwaPlugin from './plugin/pwa';
 
 export default defineConfig({
   plugins: [
@@ -11,6 +12,7 @@ export default defineConfig({
     vueJsx(),
     svgLoader({ svgoConfig: {} }),
     configArcoStyleImportPlugin(),
+    configPwaPlugin(),
   ],
   resolve: {
     alias: [

orion-visor-ui/config/vite.config.dev.ts

@@ -19,5 +19,5 @@ export default mergeConfig(
       }),
     ],
   },
-  baseConfig
+  baseConfig,
 );

orion-visor-ui/config/vite.config.prod.ts

@@ -27,5 +27,5 @@ export default mergeConfig(
       chunkSizeWarningLimit: 2000,
     },
   },
-  baseConfig
+  baseConfig,
 );