Testing service working precaching

package.json

@@ -24,7 +24,8 @@
 		"react-query": "^3.39.3",
 		"react-router-dom": "^7.5.0",
 		"react-toastify": "^11.0.5",
-		"recharts": "^2.15.2"
+		"recharts": "^2.15.2",
+		"vite-plugin-pwa": "^1.0.0"
 	},
 	"devDependencies": {
 		"@types/node": "^22.14.0",

src/main.tsx

@@ -1,6 +1,12 @@
 import App from './App';
 import render from './Root';
 
+if ('serviceWorker' in navigator) {
+	navigator.serviceWorker.register(
+	  import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw'
+	)
+  }
+
 Promise.all([render, App])
 	.then(([render, App]) => {
 		render(App);

src/service-worker.ts

@@ -0,0 +1,4 @@
+// src/service-worker.js or src/service-worker.ts
+self.addEventListener("fetch", (event: any) => {
+    event.respondWith(fetch(event.request));
+  });

vite.config.ts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import react from '@vitejs/plugin-react';
 import { defineConfig, loadEnv } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -25,7 +26,23 @@ export default defineConfig(({ mode }) => {
 				},
 			},
 		},
-		plugins: [react()],
+		plugins: [
+			react(),
+			VitePWA({
+				srcDir: "src",
+				filename: "service-worker.ts",
+				strategies: "injectManifest",
+				injectRegister: false,
+				manifest: false,
+				injectManifest: {
+					injectionPoint: undefined,
+				},
+				workbox: {
+					maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+					globPatterns: ['**/*.{ts,js,css,html,ico,png,svg}']
+				}
+			})
+		],
 		server: {
 			port: 3000,
 			host: '0.0.0.0',