add custom service worker to cache github requests

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /web/dist
+/dev-dist
 
 # local env files
 .envrc

package.json

@@ -64,24 +64,27 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "concurrently": "^7.6.0",
+    "@vue/tsconfig": "^0.4.0",
+    "concurrently": "^8.2.0",
     "electron": "^23.1.4",
     "electron-builder": "^23.6.0",
     "electron-vite": "^1.0.20",
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^9.2.0",
-    "glob": "^7.2.0",
+    "glob": "^10.2.7",
     "http-server": "^14.1.0",
     "prettier": "^2.5.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.1",
     "sass": "^1.52.1",
     "typescript": "~5.0.2",
     "vite": "^4.2.0",
-    "vite-plugin-pwa": "^0.14.4",
+    "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-webfont-dl": "^3.4.2",
     "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.2.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0"
   },
   "browserslist": [
     "> 1%",

src/sw.ts

@@ -0,0 +1,28 @@
+import { clientsClaim } from "workbox-core";
+import { registerRoute } from "workbox-routing";
+import { StaleWhileRevalidate } from "workbox-strategies";
+import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";
+
+declare let self: ServiceWorkerGlobalScope;
+
+const cacheUrls = [
+  "raw.githubusercontent.com",
+  "api.github.com",
+  "cors.bubblesort.me",
+];
+
+self.__WB_DISABLE_DEV_LOGS = true;
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+clientsClaim();
+cleanupOutdatedCaches();
+
+registerRoute(
+  ({ url }) => cacheUrls.includes(url.hostname),
+  new StaleWhileRevalidate()
+);
+precacheAndRoute(self.__WB_MANIFEST);

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": [
     "env.d.ts",
     "src/**/*",
@@ -19,6 +19,12 @@
       "semver",
       "vite-plugin-pwa/client",
     ],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable",
+      "WebWorker"
+    ],
     "allowJs": true,
     "noImplicitAny": false
   },

tsconfig.vite-config.json

@@ -1,8 +1,12 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "include": [
+    "vite.config.*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": [
+      "node"
+    ]
   }
-}
+}

vite.config.ts

@@ -40,12 +40,9 @@ export default defineConfig({
       "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap",
     ]),
     VitePWA({
-      includeAssets: [
-        "favicon.svg",
-        "favicon.ico",
-        "robots.txt",
-        "apple-touch-icon.png",
-      ],
+      strategies: "injectManifest",
+      srcDir: "src",
+      filename: "sw.ts",
       manifest: {
         name: "QUICKSILVER Configurator",
         short_name: "QUICKSILVER",
@@ -74,6 +71,17 @@ export default defineConfig({
         display: "standalone",
         background_color: "#FFFFFF",
       },
+      devOptions: {
+        enabled: true,
+        type: "module",
+      },
+      workbox: {
+        sourcemap: process.env.NODE_ENV !== "production",
+        mode: process.env.NODE_ENV,
+      },
+      injectManifest: {
+        rollupFormat: "iife",
+      },
     }),
   ],
   server: {