Make forecasting installable as a PWA

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/nginx.conf

@@ -1,4 +1,20 @@
 server {
+    location = /forecasting/manifest.webmanifest {
+        default_type application/manifest+json;
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    location = /forecasting/sw.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    location = /forecasting/registerSW.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
   listen 80;
   server_name _;
 

frontend/package.json

@@ -25,6 +25,7 @@
     "@types/react-plotly.js": "^2.6.4",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.11",
+    "vite-plugin-pwa": "^1.3.0"
   }
 }

frontend/src/main.tsx

@@ -9,6 +9,14 @@ const qc = new QueryClient({
   defaultOptions: { queries: { retry: 1, staleTime: 30_000 } },
 })
 
+
+if (new URLSearchParams(window.location.search).has('install')) {
+  window.addEventListener('beforeinstallprompt', e => {
+    e.preventDefault()
+    ;(e as Event & { prompt: () => Promise<void> }).prompt()
+  }, { once: true })
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter basename="/forecasting">

frontend/vite.config.ts

@@ -1,7 +1,32 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
-  plugins: [react()],
   base: '/forecasting/',
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Forecasting',
+        short_name: 'Forecast',
+        start_url: '/forecasting/',
+        scope: '/forecasting/',
+        display: 'standalone',
+        theme_color: '#0f1f35',
+        background_color: '#0f1f35',
+        icons: [
+          { src: '/forecasting/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/forecasting/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
+        ],
+      },
+      workbox: {
+        navigateFallback: '/forecasting/index.html',
+        navigateFallbackDenylist: [/\/api\//],
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
+      },
+    }),
+  ],
 })