feat: 安装到桌面应用功能

manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "蛟龙云",
+  "short_name": "WebApp",
+  "description": "构建万物互联",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/public/logo.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}

public/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./logo.ico">
+    <link rel="manifest" href="/manifest.json">
     <title>蛟龙云联</title>
     <style type="text/css">
       .icon {
@@ -35,6 +36,17 @@
     <div id="app">
     </div>
 
+    <script>
+
+      if ('serviceWorker' in navigator && 'PushManager' in window) {
+        navigator.serviceWorker.register('/path/to/service-worker.js').then(function(registration) {
+          console.log('Service Worker 注册成功:', registration);
+        }).catch(function(error) {
+          console.error('Service Worker 注册失败:', error);
+        });
+      }
+
+    </script>
   </body>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>\ -->
   <!-- <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script> -->

service-worker.js

@@ -0,0 +1,23 @@
+const cacheName = 'my-web-app-cache'
+const filesToCache = [
+  '/',
+  '/index.html',
+  '/style.css',
+  '/path/to/icon.png'
+]
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(cacheName).then((cache) => {
+      return cache.addAll(filesToCache)
+    })
+  )
+})
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request)
+    })
+  )
+})

src/layout/navbar.vue

@@ -43,6 +43,14 @@
               <search />
             </a-col>
             <a-col class="df-center"  style="height: 54px;">
+              <a-tooltip placement="bottom">
+                <template #title>
+                  <span>添加网页到桌面</span>
+                </template>
+                <a-button type="text" @click="addDeskToApp" >  <DesktopOutlined  style="font-size: 22px;" /></a-button>
+              </a-tooltip>
+            </a-col>
+            <a-col class="df-center" style="height: 54px;">
               <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
             </a-col>
             <a-col class="df-center"  style="height: 54px;">
@@ -63,6 +71,8 @@ import { IconTsx } from '@/components/MicroComponents/index'
 import { useDesignStore } from '@/store'
 import { useDeviceType } from '@/hooks'
 import search from './components/search/index.vue'
+import { DesktopOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
 
 const logoPng = require('@/assets/logo/logo-blue.png')
 
@@ -97,6 +107,21 @@ const changeRouter = (route: ROUTER.RoutesProps) => {
   appRouter.changeNavbarRoute(route)
 }
 
+const addDeskToApp = () => {
+  if ('beforeinstallprompt' in window) {
+    // 在支持 PWA 安装的浏览器中，手动触发安装提示
+    window.beforeinstallprompt.prompt()
+    window.beforeinstallprompt.userChoice.then((choiceResult) => {
+      if (choiceResult.outcome === 'accepted') {
+        console.log('用户已接受安装提示')
+      } else {
+        console.log('用户已拒绝安装提示')
+      }
+    })
+  } else {
+    message.error('浏览器暂不支持此操作')
+  }
+}
 </script>
 
 <style lang="less" scoped >