Make reports installable as a PWA

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-11 11:27:01 +00:00
parent 803332e6a3
commit e9f1d4fdea
8 changed files with 6294 additions and 2 deletions

13
frontend/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#374151" />
<title>Reports</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

View file

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

6230
frontend/package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

@ -18,6 +18,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"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

View file

@ -3,6 +3,14 @@ import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
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>
<App />

View file

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