feat: add PWA support via vite-plugin-pwa

.gitignore

@@ -40,4 +40,8 @@ contractor_fetch_log.csv
 wrangler.toml
 
 # Dev
-.cursor/*
+.cursor/*
+
+# PWA
+dev-dist
+.dev-dist

package.json

@@ -99,7 +99,8 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
     "uuid": "^9.0.1",
-    "vite": "^5.4.2"
+    "vite": "^5.4.2",
+    "vite-plugin-pwa": "^1.2.0"
   },
   "overrides": {
     "react-helmet-async": {

vite.config.ts

@@ -2,13 +2,67 @@ import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     outDir: 'dist',
   },
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+      workbox: {
+        maximumFileSizeToCacheInBytes: 10485760,
+        cleanupOutdatedCaches: true,
+        navigateFallback: '/index.html',
+        navigateFallbackAllowlist: [/^\/$/],
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+      },
+      manifest: {
+        name: 'BetterGov.ph',
+        short_name: 'BetterGov.ph',
+        icons: [
+          {
+            src: '/pwa/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: '/pwa/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: '/pwa/pwa-maskable-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+          {
+            src: '/pwa/pwa-maskable-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+        start_url: '/',
+        lang: 'en-US',
+        display: 'fullscreen',
+        background_color: '#FFFFFF',
+        theme_color: '#FFFFFF',
+        description:
+          'A community-led initiative to create a better and more usable Philippine national government website.',
+      },
+    }),
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),