Make hk-planner installable as a PWA

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

frontend/nginx.conf

@@ -1,4 +1,20 @@
 server {
+    location = /hk-planner/manifest.webmanifest {
+        default_type application/manifest+json;
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    location = /hk-planner/sw.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    location = /hk-planner/registerSW.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
     listen 80;
     server_name localhost;
     root /usr/share/nginx/html;

frontend/package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.5",
+    "vite-plugin-pwa": "^1.3.0"
   }
 }

frontend/src/main.tsx

@@ -3,6 +3,16 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 
+
+// When opened from the portal's install button (?install=1), trigger the
+// PWA install prompt as soon as the browser offers it (Chrome/Edge only).
+if (new URLSearchParams(window.location.search).has('install')) {
+  window.addEventListener('beforeinstallprompt', e => {
+    e.preventDefault()
+    ;(e as Event & { prompt: () => Promise<void> }).prompt()
+  }, { once: true })
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />

frontend/vite.config.ts

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