prelöoad experiment

2026-07-20 00:39:16 +02:00
parent c5b2f06919
commit 724f873bfe
10 changed files with 5596 additions and 59 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ dist
 dist-ssr
 *.local
 .DS_Store
+certs/
--- a/index.html
+++ b/index.html
@@ -4,7 +4,6 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/icons/icon-192.png" />
-    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="theme-color" content="#3b5bdb" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Dashfront</title>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -4,7 +4,11 @@
  "version": "0.0.1",
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "node scripts/dev.mjs",
+    "dev:https": "VITE_HTTPS=1 node scripts/dev.mjs",
+    "dev:hmr": "vite",
+    "dev:hmr:https": "VITE_HTTPS=1 vite",
+    "cert": "./scripts/generate-cert.sh",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint ."
@@ -21,6 +25,8 @@
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^6.0.2",
-    "vite": "^8.0.16"
+    "qrcode": "^1.5.4",
+    "vite": "^8.0.16",
+    "vite-plugin-pwa": "^1.3.0"
  }
 }
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -1,28 +0,0 @@
-{
-  "id": "/",
-  "name": "Dashfront",
-  "short_name": "Dashfront",
-  "start_url": "/",
-  "scope": "/",
-  "display": "standalone",
-  "background_color": "#dceeea",
-  "theme_color": "#3b5bdb",
-  "icons": [
-    {
-      "src": "/icons/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/icons/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    },
-    {
-      "src": "/icons/icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ]
-}
--- a/scripts/dev.mjs
+++ b/scripts/dev.mjs
@@ -0,0 +1,45 @@
+/**
+ * Dev with full PWA precache: production build --watch + preview.
+ * Vite HMR cannot precache in-memory modules; use npm run dev:hmr for that.
+ */
+import { build, preview } from 'vite';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = path.dirname(fileURLToPath(import.meta.url));
+const configFile = path.resolve(root, '../vite.config.js');
+
+const watcher = await build({
+  configFile,
+  build: { watch: {} },
+});
+
+let previewServer;
+
+async function startPreview() {
+  if (previewServer) return;
+  previewServer = await preview({
+    configFile,
+    preview: { host: true },
+  });
+  previewServer.printUrls();
+  previewServer.bindCLIShortcuts({ print: true });
+}
+
+watcher.on('event', (event) => {
+  if (event.code === 'BUNDLE_END') {
+    void startPreview();
+  }
+  if (event.code === 'ERROR') {
+    console.error(event.error);
+  }
+});
+
+async function shutdown() {
+  await previewServer?.close();
+  await watcher.close();
+  process.exit(0);
+}
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
--- a/scripts/generate-cert.sh
+++ b/scripts/generate-cert.sh
@@ -0,0 +1,75 @@
+#!/usr/bin/env bash
+# Generate a self-signed TLS cert for local HTTPS (Vite on :4308).
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+CERT_DIR="${CERT_DIR:-$ROOT/certs}"
+DAYS="${CERT_DAYS:-825}"
+KEY="$CERT_DIR/key.pem"
+CERT="$CERT_DIR/cert.pem"
+CNF="$CERT_DIR/openssl.cnf"
+
+mkdir -p "$CERT_DIR"
+
+# Extra hostnames / IPs: ./scripts/generate-cert.sh 192.168.188.22 myhost.local
+EXTRA=("$@")
+
+SAN="DNS:localhost,IP:127.0.0.1"
+for entry in "${EXTRA[@]}"; do
+  if [[ "$entry" =~ ^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+    SAN+=",IP:$entry"
+  else
+    SAN+=",DNS:$entry"
+  fi
+done
+
+# Include non-loopback IPv4 addresses so LAN / WebView origins work.
+while read -r ip; do
+  [[ -n "$ip" ]] || continue
+  [[ "$SAN" == *",$ip"* || "$SAN" == *"IP:$ip"* ]] && continue
+  SAN+=",IP:$ip"
+done < <(hostname -I 2>/dev/null | tr ' ' '\n' | grep -E '^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$' || true)
+
+cat >"$CNF" <<EOF
+[req]
+default_bits = 2048
+prompt = no
+default_md = sha256
+distinguished_name = dn
+x509_extensions = v3_req
+
+[dn]
+CN = localhost
+
+[v3_req]
+subjectAltName = $SAN
+keyUsage = digitalSignature, keyEncipherment
+extendedKeyUsage = serverAuth
+EOF
+
+openssl req -x509 -newkey rsa:2048 -sha256 -days "$DAYS" -nodes \
+  -keyout "$KEY" \
+  -out "$CERT" \
+  -config "$CNF"
+
+chmod 600 "$KEY"
+rm -f "$CNF"
+
+# Base64(DER) — preferred QR payload (plain text, no JSON/URL/PEM wrappers).
+DER_B64="$(openssl x509 -in "$CERT" -outform DER | base64 -w0)"
+printf '%s\n' "$DER_B64" >"$CERT_DIR/cert.der.b64"
+
+echo "Wrote $CERT"
+echo "Wrote $KEY"
+echo "Wrote $CERT_DIR/cert.der.b64"
+echo "SAN: $SAN"
+echo "Valid for $DAYS days."
+echo
+echo "=== certificate ==="
+openssl x509 -in "$CERT" -noout -subject -issuer -dates -fingerprint -sha256 -ext subjectAltName
+echo
+echo "=== QR (base64 DER, raw payload) ==="
+printf '%s' "$DER_B64" | node "$ROOT/scripts/qr-cert.mjs"
+echo
+echo "Start HTTPS: npm run dev:https"
+echo "URL: https://localhost:4308/"
--- a/scripts/qr-cert.mjs
+++ b/scripts/qr-cert.mjs
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+/** Print a terminal QR for stdin (or argv[2]) — raw payload only. */
+import qrcode from 'qrcode';
+
+const fromArg = process.argv[2];
+const payload = fromArg
+  ? fromArg
+  : (await new Response(process.stdin).text()).trim();
+
+if (!payload) {
+  console.error('usage: qr-cert.mjs <base64-der>   or pipe payload on stdin');
+  process.exit(1);
+}
+
+const out = await qrcode.toString(payload, {
+  type: 'terminal',
+  errorCorrectionLevel: 'L',
+  small: true,
+});
+process.stdout.write(out);
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,11 +2,14 @@ import { createRoot } from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from 'notistack';
+import { registerSW } from 'virtual:pwa-register';
 import AuthProvider from './auth/AuthProvider';
 import App from './App';
 import theme from './theme';
 import './index.css';

+registerSW({ immediate: true });
+
 createRoot(document.getElementById('root')).render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,33 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';

-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 4209,
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const useHttps = process.env.VITE_HTTPS === '1';
+const certDir = path.resolve(__dirname, 'certs');
+const keyPath = path.join(certDir, 'key.pem');
+const certPath = path.join(certDir, 'cert.pem');
+
+function httpsOptions() {
+  if (!useHttps) return false;
+  if (!fs.existsSync(keyPath) || !fs.existsSync(certPath)) {
+    throw new Error(
+      'Missing TLS certs. Run: npm run cert  (or ./scripts/generate-cert.sh)',
+    );
+  }
+  return {
+    key: fs.readFileSync(keyPath),
+    cert: fs.readFileSync(certPath),
+  };
+}
+
+const sharedServer = {
+  // HTTP :4209 — HTTPS :4308 (self-signed; see npm run cert / dev:https)
+  port: useHttps ? 4308 : 4209,
+  https: httpsOptions(),
  allowedHosts: true,
  proxy: {
    '/api': {
@@ -21,18 +44,61 @@ export default defineConfig({
            });
            return;
          }
-            // Backend sets Secure; WebView on http://LAN-IP will refuse it.
-            const rewritten = (Array.isArray(raw) ? raw : [raw]).map((c) =>
-              c.replace(/;\s*Secure/gi, ''),
-            );
-            proxyRes.headers['set-cookie'] = rewritten;
+          let cookies = Array.isArray(raw) ? raw : [raw];
+          // Backend sets Secure; browsers/WebViews on plain HTTP refuse it.
+          if (!useHttps) {
+            cookies = cookies.map((c) => c.replace(/;\s*Secure/gi, ''));
+            proxyRes.headers['set-cookie'] = cookies;
+          }
          console.log('[vite-proxy]', req.method, req.url, {
            status: proxyRes.statusCode,
-              setCookie: rewritten,
+            setCookie: cookies,
          });
        });
      },
    },
  },
+};
+
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        id: '/',
+        name: 'Dashfront',
+        short_name: 'Dashfront',
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        background_color: '#dceeea',
+        theme_color: '#3b5bdb',
+        icons: [
+          {
+            src: '/icons/icon-192.png',
+            sizes: '192x192',
+            type: 'image/png',
          },
+          {
+            src: '/icons/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/icons/icon-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest,woff2}'],
+        navigateFallback: 'index.html',
+      },
+    }),
+  ],
+  server: sharedServer,
+  preview: sharedServer,
 });