add service worker

package.json

@@ -12,7 +12,6 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
-    "assert": "^2.1.0",
     "buffer": "^6.0.3",
     "codemirror": "^5.65.18",
     "codemirror-editor-vue3": "^2.8.0",
@@ -29,7 +28,6 @@
     "react-chart-editor": "^0.46.1",
     "react-dom": "^16.14.0",
     "sql.js": "file:./lib/sql-js",
-    "stream-browserify": "^3.0.0",
     "tiny-emitter": "^2.1.0",
     "veaury": "^2.5.1",
     "vue": "^3.5.11",
@@ -46,7 +44,6 @@
     "@vue/test-utils": "^2.4.6",
     "chai": "^4.1.2",
     "chai-as-promised": "^8.0.1",
-    "copy-webpack-plugin": "^6.4.1",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -61,16 +58,15 @@
     "karma-mocha": "^1.3.0",
     "karma-spec-reporter": "^0.0.36",
     "karma-vite": "^1.0.5",
-    "karma-webpack": "^5.0.1",
     "mocha": "^5.2.0",
     "process": "^0.11.10",
     "url-loader": "^4.1.1",
     "vite": "^5.4.14",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-static-copy": "^2.2.0",
-    "vue-cli-plugin-ui-karma": "^0.2.5",
+    "vue-cli-plugin-ui-karma": "^0.2.5"
-    "workbox-webpack-plugin": "^6.1.5"
   },
   "overrides": {
     "karma-vite": {

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue

@@ -53,7 +53,7 @@ export default {
   color: var(--color-text-active);
   border-color: var(--color-border-dark);
 }
-.pivot-sort-btn:hover deep(.sort-icon path) {
+.pivot-sort-btn:hover :deep(.sort-icon path) {
   fill: var(--color-text-active);
 }
 

vite.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,21 +21,39 @@ export default defineConfig({
             dest: './'
           }
         ]
+      }),
+    VitePWA({
+      filename: 'service-worker.js',
+      manifest: false,
+      injectRegister: false,
+      workbox: {
+        globPatterns: ["**\/*.{js,wasm,css,html,woff2,png}"],
+        globIgnores: ['*.map', 'LICENSE', 'inquiries.json'],
+        clientsClaim: true,
+        skipWaiting: false,
+        maximumFileSizeToCacheInBytes: 40000000
+      }
     })
-],
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
-},
+  },
-optimizeDeps: {
+  optimizeDeps: {
     include:['sql.js'],
     esbuildOptions: {
       define: {
         global: 'globalThis'
       }
     }
+  },
+  build: {
+    assetsInlineLimit: 10000,
+    commonjsOptions: {
+      include: ['sql.js', /sql-wasm.js/, /node_modules/]
+    }
   }
 })
 

vue.config.js

@@ -1,6 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
-const CopyPlugin = require('copy-webpack-plugin')
-const WorkboxPlugin = require('workbox-webpack-plugin')
 
 module.exports = defineConfig({
   parallel: false,
@@ -8,48 +6,5 @@ module.exports = defineConfig({
   publicPath: '',
   // Workaround for https://github.com/vuejs/vue-cli/issues/5399 as described
   // in https://stackoverflow.com/a/63185174
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: process.env.NODE_ENV === 'development'
-  configureWebpack: {
-    plugins: [
-      new CopyPlugin({
-        patterns: [
-          // This wasm file will be fetched dynamically when we initialize sql.js
-          // It is important that we do not change its name,
-          // and that it is in the same folder as the js
-          { from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'js/' },
-          { from: 'LICENSE', to: './' }
-        ]
-      }),
-      new WorkboxPlugin.GenerateSW({
-        exclude: [/\.map$/, 'LICENSE', 'inquiries.json'],
-        clientsClaim: true,
-        skipWaiting: false,
-        maximumFileSizeToCacheInBytes: 40000000
-      })
-    ],
-    resolve: {
-      fallback: {
-        asset: require.resolve('assert'),
-        stream: require.resolve('stream-browserify')
-      }
-    }
-  },
-  chainWebpack: config => {
-    config.module
-      .rule('images')
-      .set('parser', {
-        dataUrlCondition: {
-          maxSize: 10000
-        }
-      })
-
-    config.module.rule('js').exclude.add(/worker\.js$/)
-
-    config
-      .plugin('html')
-      .tap(args => {
-        args[0].minify = false
-        return args
-      })
-  }
 })