✨ chrome PWA 支持.

orion-visor-ui/src/components/app/app-footer/index.vue

@@ -8,7 +8,7 @@
         <a-link target="_blank" href="https://gitee.com/lijiahangmax/orion-visor">gitee</a-link>
         <a-link target="_blank" href="https://lijiahangmax.github.io/orion-visor">文档</a-link>
         <a-link target="_blank" href="https://github.com/lijiahangmax/orion-visor/blob/main/LICENSE">License</a-link>
-        <a-link target="_blank" :href="`https://github.com/lijiahangmax/orion-visor/releases/tag/v${version}`">V{{ version }} 社区版</a-link>
+        <a-link target="_blank" :href="`https://github.com/lijiahangmax/orion-visor/releases/tag/v${version}`">v{{ version }} Community</a-link>
       </a-space>
       <span class="copyright">
         Copyright<icon-copyright /> 2023 - {{ new Date().getFullYear() }} Li Jiahang, All rights reserved.

orion-visor-ui/src/components/app/setting/index.vue

@@ -21,6 +21,14 @@
       <block :options="dataOpts" title="数据设置" />
       <!-- 页面视图 -->
       <block :options="viewsOpts" title="页面视图" />
+      <!-- 保存为桌面程序 -->
+      <a-button v-if="visibleCreatePwaApp()"
+                class="mb16"
+                type="primary"
+                @click="createPwaApp"
+                long>
+        保存为桌面程序
+      </a-button>
     </div>
   </a-drawer>
 </template>
@@ -30,6 +38,8 @@
   import { useAppStore } from '@/store';
   import useVisible from '@/hooks/visible';
   import { CardPageSizeOptions, TablePageSizeOptions } from '@/types/const';
+  import { Message } from '@arco-design/web-vue';
+  import { isStandaloneMode } from '@/utils/env';
   import Block from './block.vue';
 
   const appStore = useAppStore();
@@ -39,6 +49,7 @@
   const open = () => {
     setVisible(true);
   };
+
   defineExpose({ open });
 
   // 布局设置
@@ -110,7 +121,6 @@
     },
   ]);
 
-
   // 页面视图配置
   const viewsOpts = computed(() => [
     {
@@ -142,6 +152,26 @@
     },
   ]);
 
+  // 是否展示创建 PWA 应用
+  const visibleCreatePwaApp = () => {
+    return !isStandaloneMode && !!(window as CustomWindow).deferredPrompt;
+  };
+
+  // 创建 PWA 应用
+  const createPwaApp = () => {
+    const win = window as CustomWindow;
+    try {
+      win.deferredPrompt.prompt();
+      win.deferredPrompt.userChoice.then((choiceResult: any) => {
+        if (choiceResult.outcome === 'accepted') {
+          win.deferredPrompt = null;
+        }
+      });
+    } catch (e) {
+      Message.error('无法安装 PWA 应用');
+    }
+  };
+
 </script>
 
 <style lang="less" scoped>

orion-visor-ui/src/env.d.ts

@@ -7,6 +7,14 @@ declare module '*.vue' {
   export default component;
 }
 
+// window
+interface CustomWindow extends Window {
+  deferredPrompt?: any;
+}
+
+declare const window: CustomWindow;
+
+// .env
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string;
   readonly VITE_WS_BASE_URL: string;

orion-visor-ui/src/main.ts

@@ -7,12 +7,12 @@ import store from './store';
 import i18n from './locale';
 import directive from './directive';
 import './mock';
-import App from './App.vue';
 // 样式通过 arco-plugin 插件导入 详见目录文件 config/plugin/arcoStyleImport.ts
 import '@/assets/style/global.less';
 import '@/assets/style/layout.less';
 import '@/assets/style/arco-extends.less';
 import '@/api/interceptor';
+import App from './App.vue';
 
 const app = createApp(App);
 
@@ -26,3 +26,9 @@ app.use(globalComponents);
 app.use(directive);
 
 app.mount('#app');
+
+// 监听 PWA 注册事件
+window.addEventListener('beforeinstallprompt', (e) => {
+  e.preventDefault();
+  (window as CustomWindow).deferredPrompt = e;
+});

orion-visor-ui/src/router/index.ts

@@ -5,6 +5,7 @@ import { appRoutes } from './routes';
 import BASE_ROUTERS from './routes/base';
 import createRouteGuard from './guard';
 import { openWindow } from '@/utils';
+import { isStandaloneMode } from '@/utils/env';
 import 'nprogress/nprogress.css';
 
 NProgress.configure({ showSpinner: false });
@@ -27,7 +28,13 @@ createRouteGuard(router);
 // 新页面打开路由
 export const openNewRoute = (route: RouteLocationRaw) => {
   const { href } = router.resolve(route);
-  openWindow(href);
+  if (isStandaloneMode) {
+    // 单应用 PWA 则跳转
+    window.location.href = href;
+  } else {
+    // 浏览器 则直接打开
+    openWindow(href);
+  }
 };
 
 export default router;

orion-visor-ui/src/utils/env.ts

@@ -5,6 +5,13 @@ export const isSecureEnvironment = (() => {
   return window.location.protocol === 'https:' || window.location.hostname === 'localhost';
 })();
 
+// 当前是否为单应用模式 PWA
+export const isStandaloneMode = (() => (
+  (window.matchMedia('(display-mode: standalone)').matches)
+  || ((window.navigator as any).standalone)
+  || document.referrer.includes('android-app://')
+) === true)();
+
 // http base url
 export const httpBaseUrl = (() => {
   const configBase = import.meta.env.VITE_API_BASE_URL;