fix: production build + pwa

package.json

@@ -13,7 +13,9 @@
   "scripts": {
     "postinstall": "patch-package",
     "serve": "vite",
+    "start": "vite",
     "build": "vite build",
+    "build:wasm": "bash ./scripts/build-wasm.sh",
     "test": "jest",
     "pretty": "prettier --write src/{**/*,*}.{js,ts,jsx,tsx,vue}",
     "pretty:check": "prettier --check src/{**/*,*}.{js,ts,jsx,tsx,vue}",
@@ -43,6 +45,7 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/crypto-js": "^4.0.2",
     "@types/jest": "^27.0.3",
     "@vitejs/plugin-vue": "^3.2.0",
@@ -62,6 +65,8 @@
     "unplugin-vue-components": "^0.22.11",
     "util": "^0.12.5",
     "vite": "^3.2.4",
-    "vite-plugin-commonjs": "^0.5.3"
+    "vite-plugin-commonjs": "^0.5.3",
+    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-static-copy": "^0.12.0"
   }
 }

src/KgmWasm/KgmWasmBundle.d.ts

@@ -0,0 +1,5 @@
+interface KgmWasmBundle {
+  (): Promise<any>;
+}
+
+export = KgmWasmBundle;

src/QmcWasm/QmcWasmBundle.d.ts

@@ -0,0 +1,5 @@
+interface QmcWasmBundle {
+  (): Promise<any>;
+}
+
+export = QmcWasmBundle;

src/decrypt/kgm_wasm.ts

@@ -1,4 +1,4 @@
-import KgmCryptoModule from '@/KgmWasm/KgmWasmBundle';
+import * as KgmCryptoModule from '@/KgmWasm/KgmWasmBundle';
 import { MergeUint8Array } from '@/utils/MergeUint8Array';
 
 // 每次处理 2M 的数据

src/decrypt/qmc_wasm.ts

@@ -1,5 +1,5 @@
 import { MergeUint8Array } from '@/utils/MergeUint8Array';
-import QmcCryptoModule from '@/QmcWasm/QmcWasmBundle';
+import * as QmcCryptoModule from '@/QmcWasm/QmcWasmBundle';
 
 // 每次处理 2M 的数据
 const DECRYPTION_BUF_SIZE = 2 * 1024 * 1024;

src/global.d.ts

@@ -0,0 +1,31 @@
+declare module 'virtual:pwa-register/vue' {
+  // @ts-expect-error ignore when vue is not installed
+  import type { Ref } from 'vue';
+
+  export interface RegisterSWOptions {
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    /**
+     * Called only if `onRegisteredSW` is not provided.
+     *
+     * @deprecated Use `onRegisteredSW` instead.
+     * @param registration The service worker registration if available.
+     */
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+    /**
+     * Called once the service worker is registered (requires version `0.12.8+`).
+     *
+     * @param swScriptUrl The service worker script url.
+     * @param registration The service worker registration if available.
+     */
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void;
+    onRegisterError?: (error: any) => void;
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: Ref<boolean>;
+    offlineReady: Ref<boolean>;
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+  };
+}

src/registerServiceWorker.js

@@ -1,30 +1,3 @@
-/* eslint-disable no-console */
+import { useRegisterSW } from 'virtual:pwa-register/vue';
 
-import { register } from 'register-service-worker';
-
-if (process.env.NODE_ENV === 'production' && window.location.protocol === 'https:') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready() {
-      console.log('App is being served from cache by a service worker.');
-    },
-    registered() {
-      console.log('Service worker has been registered.');
-    },
-    cached() {
-      console.log('Content has been cached for offline use.');
-    },
-    updatefound() {
-      console.log('New content is downloading.');
-    },
-    updated() {
-      console.log('New content is available.');
-      window.location.reload();
-    },
-    offline() {
-      console.log('No internet connection found. App is running in offline mode.');
-    },
-    error(error) {
-      console.error('Error during service worker registration:', error);
-    },
-  });
-}
+useRegisterSW();

vite.config.ts

@@ -8,8 +8,10 @@ import Components from 'unplugin-vue-components/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill';
 import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
-
+import { VitePWA } from 'vite-plugin-pwa';
 import commonjs from 'vite-plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 export default defineConfig({
   optimizeDeps: {
@@ -45,5 +47,39 @@ export default defineConfig({
     Components({
       resolvers: [ElementPlusResolver()],
     }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: '音乐解锁',
+        theme_color: '#4DBA87',
+        description: '在任何设备上解锁已购的加密音乐！',
+        icons: [
+          {
+            src: 'assets/img/icons/android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'assets/img/icons/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+    replace({
+      preventAssignment: false,
+      values: {
+        'global.': 'window.',
+      },
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'img',
+          dest: 'assets',
+        },
+      ],
+    }),
   ],
 });