9ad700a1a1
Closes #4282. mara: "scope looks good" — approving the plan posted there (manifest + icons + minimal shell-only service worker + iOS meta tags) and both explicit questions (network-first-with-offline-fallback, never cache /api/*). docs/web-ui/design-guide.md's "Layout & viewport" section already asserted swarm-ui is installable as a PWA — this is what actually backs it. - manifest.webmanifest: name/icons/start_url/standalone display, theme #cba6f7 / background #1e1e2e matching the mocha --purple/--bg values. - sw.js: plain JS, not TypeScript — the DOM lib swarm-ui's own tsconfig uses and the WebWorker lib a service worker's globals need are mutually exclusive in one tsc program, not worth a second tsconfig for a self-contained ~100-line file. Scoped to the app shell only, never touches /api/* at all, network-first with offline-fallback-to-cache (not cache-first) since main.js/main.css are unhashed filenames and a cache-first SW would risk wedging an operator on stale JS after a deploy. - index.html: manifest link, theme-color meta, iOS apple-mobile-web-app-* tags (Safari ignores the manifest spec). - main.tsx: feature-detected SW registration. - branding/hyperhive-maskable.svg: hyperhive.svg's own artwork already fills nearly its whole canvas, so a maskable icon needs a padded variant or an OS mask crops the outer ring/corner brackets — embeds the original via a scaled <image> ref rather than duplicating markup. - nix/packages/swarm-ui.nix: rasterizes icon-192/512/512-maskable.png from the branding SVGs at build time via librsvg, rather than checking in static PNGs. Verified for real: typecheck+build green, and a real headless-chromium tab driven over CDP confirms the service worker registers and becomes the active controller, and a simulated-offline reload still serves the full cached shell rather than a browser error page. nix build .#swarm-ui also verified green, including the rasterized icon output.
30 lines
1.4 KiB
HTML
30 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>hyperhive swarm</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<!-- PWA installability — design-guide.md's "Layout & viewport"
|
|
section already asserted swarm-ui is installable; this is what
|
|
actually backs it. `manifest.webmanifest` + icons are
|
|
nix-packaged (nix/packages/swarm-ui.nix), same as favicon.svg
|
|
above — not part of the plain npm build output. -->
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#cba6f7" />
|
|
<!-- Safari ignores the manifest spec entirely — these are its own
|
|
"Add to Home Screen" affordances, same icon/name the manifest
|
|
already declares for every other browser. -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="swarm" />
|
|
<link rel="apple-touch-icon" href="/icon-192.png" />
|
|
<link rel="stylesheet" href="/static/colors.css" />
|
|
<link rel="stylesheet" href="/static/theme.css" />
|
|
<link rel="stylesheet" href="/static/swarm-ui.css" />
|
|
<link rel="stylesheet" href="/static/main.css" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/static/main.js"></script>
|
|
</body>
|
|
</html>
|