add service worker

package.json

@@ -23,7 +23,8 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
     "socket.io-client": "^4.1.3",
-    "vanta": "^0.5.21"
+    "vanta": "^0.5.21",
+    "vite-plugin-pwa": "^0.8.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

src/main.tsx

@@ -1,5 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
+// eslint-disable-next-line import/no-unresolved
+import { registerSW } from "virtual:pwa-register";
 import App from "./App";
 
+registerSW({
+  onOfflineReady() {
+    // show a ready to work offline to user
+  },
+});
 ReactDOM.render(<App />, document.getElementById("root"));

tsconfig.json

@@ -13,7 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "types": ["vite-plugin-pwa/client"]
   },
   "include": ["./src"]
 }

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import reactRefresh from "@vitejs/plugin-react-refresh";
 import legacy from "@vitejs/plugin-legacy";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,6 +11,15 @@ export default defineConfig({
       targets: ["ie >= 11"],
       additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
     }),
+    VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        // content of manifest
+      },
+      workbox: {
+        // workbox options for generateSW
+      },
+    }),
   ],
   server: { proxy: { "/api": { target: "http://127.0.0.1:3001/", ws: true } } },
 });