✨ 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>