Fix for issue #63: Implement PWA for Offline Support Using vite-pwa

.gitignore

@@ -1 +1,8 @@
 /resources/*
+
+# Node modules
+*/node_modules/
+
+# Production build output
+*/dist/
+*/dev-dist/

frontend/index.html

@@ -12,7 +12,7 @@
   <link rel="shortcut icon" href="/favicon.ico" />
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <meta name="apple-mobile-web-app-title" content="Flash-Notes" />
-  <link rel="manifest" href="/site.webmanifest" />
+  <meta name="theme-color" content="#ffffff">
 
   <title>FlashNotes</title>
 </head>

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

frontend/vite.config.ts

@@ -2,10 +2,50 @@ import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react(), TanStackRouterVite(), tsconfigPaths()],
+	plugins: [react(), TanStackRouterVite(), tsconfigPaths(),
+		VitePWA({
+			registerType: 'autoUpdate',
+			injectRegister: 'auto',
+			workbox: {
+				globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+			},
+			devOptions: {
+			  enabled: true, //only keep as true while developing, not in production
+			},
+			includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
+			manifest: {
+			  name: 'Flash-Notes',
+			  short_name: 'Flash-Notes',
+			  description: 'Study flashcards online or offline, even as a guest!',
+			  theme_color: '#ffffff', 
+			  background_color: '#ffffff',
+			  display: 'standalone',
+			  start_url: '/',
+			  icons: [
+				{
+				  src: '/web-app-manifest-192x192.png',
+				  sizes: '192x192',
+				  type: 'image/png',
+				},
+				{
+				  src: '/web-app-manifest-512x512.png',
+				  sizes: '512x512',
+				  type: 'image/png',
+				},
+				{
+				  src: '/web-app-manifest-512x512.png',
+				  sizes: '512x512',
+				  type: 'image/png',
+				  purpose: 'any maskable',
+				},
+			  ],
+			},
+		  })
+	],
 	server: {
 		watch: {
 			usePolling: true,