Support pwa

HeHang0 · Nov 9, 2023 · 7b19302 · 7b19302
1 parent 6fbee13
commit 7b19302
Show file tree

Hide file tree

Showing 19 changed files with 116 additions and 25 deletions.
diff --git a/web/package.json b/web/package.json
@@ -42,6 +42,7 @@
     "unplugin-auto-import": "*",
     "unplugin-vue-components": "*",
     "vite": "*",
+    "vite-plugin-pwa": "^0.16.7",
     "vue-tsc": "*"
   }
 }
diff --git a/web/src/assets/images/logo-circle.png → web/public/logo-circle.png b/web/src/assets/images/logo-circle.png → web/public/logo-circle.png
diff --git a/web/src/assets/images/logo.png → web/public/logo.png b/web/src/assets/images/logo.png → web/public/logo.png
diff --git a/web/scripts/fix.ts b/web/scripts/fix.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import { Plugin } from 'vite';
 
 function fixJSMediaTagsError() {
   try {
@@ -18,14 +19,62 @@ function fixJSMediaTagsError() {
     fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson), {
       encoding: 'utf8'
     });
-    console.log('开始执行了', packageJsonPath);
   } catch {}
 }
 
 export const FixJSMediaTagsErrorPlugin = function () {
   return {
-    name: 'vite-plugin-fix-',
+    name: 'vite-plugin-fix-jsmediatags',
     apply: 'build',
     buildStart: fixJSMediaTagsError
   };
 };
+
+function transformIndexHtmlHandler(html: string) {
+  let prependedHtml = '';
+  const matchLink = /<link[\s]+rel="manifest"[^>]+>/;
+  if (matchLink.test(html)) {
+    html = html.replace(matchLink, '');
+  }
+  const matchScript = /<script[\s]+id="vite\-plugin\-pwa[^>]+><\/script>/;
+  if (matchScript.test(html)) {
+    let scriptPwa = html.match(matchScript)[0];
+    scriptPwa = scriptPwa.replace(/src="[^"]+"/, '');
+    scriptPwa = scriptPwa.replace(
+      '</script>',
+      `
+      if ('serviceWorker' in navigator) {
+        let routerPrefix = localStorage.getItem('musiche-router-prefix') || '';
+        if (routerPrefix) routerPrefix = '/' + routerPrefix;
+        const link = document.createElement('link');
+        link.rel = 'manifest';
+        link.href = routerPrefix + '/manifest.json';
+        document.head.appendChild(link);
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register(routerPrefix + '/sw.js', { scope: './' });
+        });
+      }
+    </script>`
+    );
+    prependedHtml += '\n    ' + scriptPwa;
+    html = html.replace(matchScript, '');
+  }
+  return html.replace(
+    '<head>',
+    '<head>' + prependedHtml.replaceAll('="./', '="/musiche/')
+  );
+}
+
+export const FixPwaPlugin = function () {
+  return <Plugin>{
+    name: 'vite-plugin-fix-pwa',
+    apply: 'build',
+    enforce: 'post',
+    transformIndexHtml: {
+      order: 'post',
+      handler(html) {
+        return transformIndexHtmlHandler(html);
+      }
+    }
+  };
+};
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -7,11 +7,10 @@ import CurrentList from './components/CurrentList.vue';
 import PlayDetail from './components/PlayDetail.vue';
 import WindowHelper from './components/WindowHelper.vue';
 import { webView2Services } from './utils/utils';
-import LogoImage from './assets/images/logo.png';
-import LogoCircleImage from './assets/images/logo-circle.png';
 import { MusicConnection } from './stores/connection';
 import { usePlayStore } from './stores/play';
 import { useSettingStore } from './stores/setting';
+import { LogoCircleImage, LogoImage } from './utils/logo';
 
 const play = usePlayStore();
 const setting = useSettingStore();

diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { usePlayStore } from '../stores/play';
 import { SortType } from '../utils/type';
-import LogoImage from '../assets/images/logo.png';
+import { LogoImage } from '../utils/logo';
 interface Props {
   full?: boolean;
 }

diff --git a/web/src/components/MusicList.vue b/web/src/components/MusicList.vue
@@ -5,8 +5,7 @@ import { Vue3Menus } from 'vue3-menus';
 import { usePlayStore } from '../stores/play';
 import { Music } from '../utils/type';
 import * as api from '../utils/api/api';
-import LogoImage from '../assets/images/logo.png';
-import LogoCircleImage from '../assets/images/logo-circle.png';
+import { LogoImage, LogoCircleImage } from '../utils/logo';
 import CloudMusicImage from '../assets/images/cloud-music.webp';
 import QQMusicImage from '../assets/images/qq-music.png';
 import MiguMusicImage from '../assets/images/migu-music.webp';

diff --git a/web/src/components/Playlist.vue b/web/src/components/Playlist.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Playlist } from '../utils/type';
-import LogoImage from '../assets/images/logo.png';
+import { LogoImage } from '../utils/logo';
 interface Props {
   list: Playlist[];
   loading?: boolean;

diff --git a/web/src/components/SideMenu.vue b/web/src/components/SideMenu.vue
@@ -2,8 +2,7 @@
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { usePlayStore } from '../stores/play';
-import LogoImage from '../assets/images/logo-circle.png';
-import LogoCircleImage from '../assets/images/logo-circle.png';
+import { LogoImage, LogoCircleImage } from '../utils/logo';
 import { useSettingStore } from '../stores/setting';
 const { options } = useRouter();
 const route = useRoute();

diff --git a/web/src/components/player/Jukebox.vue b/web/src/components/player/Jukebox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Ref, ref } from 'vue';
 import { usePlayStore } from '../../stores/play';
-import LogoImage from '../../assets/images/logo.png';
+import { LogoImage } from '../../utils/logo';
 const play = usePlayStore();
 const discElement: Ref<HTMLImageElement | null> = ref(null);
 </script>

diff --git a/web/src/style/base.less b/web/src/style/base.less
@@ -141,12 +141,6 @@ body {
   user-select: none;
 }
 
-audio::-webkit-media-controls-panel {
-  background-image: url(/src/assets/images/logo-circle.png);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
 ::-webkit-scrollbar {
   height: 6px;
   width: 6px;

diff --git a/web/src/utils/api/cloud.ts b/web/src/utils/api/cloud.ts
@@ -52,6 +52,7 @@ var playQuality: MusicQuality = 'PQ';
 
 export function setDownloadQuality(quality: MusicQuality) {
   downloadQuality = quality;
+  console.log(downloadQuality);
 }
 
 export function setPlayQuality(quality: MusicQuality) {

diff --git a/web/src/utils/api/qq.ts b/web/src/utils/api/qq.ts
@@ -76,6 +76,7 @@ var playQuality: MusicQuality = 'PQ';
 
 export function setDownloadQuality(quality: MusicQuality) {
   downloadQuality = quality;
+  console.log(downloadQuality);
 }
 
 export function setPlayQuality(quality: MusicQuality) {

diff --git a/web/src/utils/logo.ts b/web/src/utils/logo.ts
@@ -0,0 +1,4 @@
+const routerHistory = localStorage.getItem('musiche-router-prefix');
+const imagePrefix = routerHistory ? '/' + routerHistory : '';
+export const LogoImage = imagePrefix + '/logo.png';
+export const LogoCircleImage = imagePrefix + '/logo-circle.png';
diff --git a/web/src/utils/platform.ts b/web/src/utils/platform.ts
@@ -1,7 +1,7 @@
 import CloudMusicImage from '../assets/images/cloud-music.webp';
 import QQMusicImage from '../assets/images/qq-music.png';
 import MiguMusicImage from '../assets/images/migu-music.webp';
-import LogoCircle from '../assets/images/logo-circle.png';
+import { LogoCircleImage } from '../utils/logo';
 import { MusicType } from './type';
 
 const images: Record<string, string> = {
@@ -29,7 +29,7 @@ export const musicTypeInfo: Record<
     get: function (_target, prop: MusicType) {
       return {
         name: names[prop] || 'Musiche',
-        image: images[prop] || LogoCircle,
+        image: images[prop] || LogoCircleImage,
         type: prop
       };
     }

diff --git a/web/src/views/playlist.vue b/web/src/views/playlist.vue
@@ -5,7 +5,7 @@ import * as api from '../utils/api/api';
 import { usePlayStore } from '../stores/play';
 import { Music, MusicType, Playlist } from '../utils/type';
 import MusicList from '../components/MusicList.vue';
-import LogoImage from '../assets/images/logo.png';
+import { LogoImage } from '../utils/logo';
 import { useSettingStore } from '../stores/setting';
 const { currentRoute, replace } = useRouter();
 const play = usePlayStore();

diff --git a/web/src/views/setting.vue b/web/src/views/setting.vue
@@ -25,7 +25,7 @@ import {
   webView2Services
 } from '../utils/utils';
 
-import LogoImageCircle from '../assets/images/logo-circle.png';
+import { LogoCircleImage } from '../utils/logo';
 import { ThemeColor } from '../utils/color';
 
 const { currentRoute, replace } = useRouter();
@@ -475,7 +475,7 @@ onUnmounted(unWatch);
                   <el-icon v-if="!theme.color && !theme.image"
                     ><PictureFilled
                   /></el-icon>
-                  <img :src="LogoImageCircle" />
+                  <img :src="LogoCircleImage" />
                   <el-checkbox
                     v-if="setting.appTheme.id == theme.id"
                     checked></el-checkbox>

diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -21,7 +21,7 @@
     "noFallthroughCasesInSwitch": true,
 
     "composite": true,
-    "types": ["node", "vite/client"]
+    "types": ["node", "vite/client", "vite-plugin-pwa/client"]
   },
   "include": [
     "src/**/*.ts",

diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -4,9 +4,10 @@ import vue from '@vitejs/plugin-vue';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { VitePWA } from 'vite-plugin-pwa';
 
 import { ZipPlugin } from './scripts/zip';
-import { FixJSMediaTagsErrorPlugin } from './scripts/fix';
+import { FixJSMediaTagsErrorPlugin, FixPwaPlugin } from './scripts/fix';
 
 const plugins = [
   vue(),
@@ -16,7 +17,50 @@ const plugins = [
   Components({
     resolvers: [ElementPlusResolver()]
   }),
-  FixJSMediaTagsErrorPlugin()
+  FixJSMediaTagsErrorPlugin(),
+  VitePWA({
+    manifest: {
+      name: 'Musiche',
+      short_name: 'Musiche',
+      description: '音乐播放器[支持网易云、QQ音乐、咪咕音乐].',
+      start_url: 'musiche',
+      scope: '.',
+      display: 'standalone',
+      background_color: '#ffffff',
+      theme_color: '#000000',
+      icons: [
+        {
+          src: 'logo-circle.png',
+          type: 'image/png',
+          sizes: '300x300'
+        }
+      ]
+    },
+    manifestFilename: 'manifest.json',
+    includeManifestIcons: false,
+    outDir: 'dist',
+    includeAssets: ['logo.png'],
+    registerType: 'autoUpdate',
+    workbox: {
+      runtimeCaching: [
+        {
+          urlPattern: /(.*?)\.(js|css|ts)/, // js /css /ts静态资源缓存
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'js-css-cache'
+          }
+        },
+        {
+          urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'image-cache'
+          }
+        }
+      ]
+    }
+  }),
+  FixPwaPlugin()
 ];
 process.env.BUILD_ZIP === '1' && plugins.push(ZipPlugin());
 // https://vitejs.dev/config/