6c0f5e2fd5
Now installable on iOS (Safari → Share → Add to Home Screen) and
Android/desktop Chrome (install prompt or Settings → Install app).
Launches in standalone mode with a dark theme color matching the
lock-icon palette.
Stack:
• vite-plugin-pwa with workbox in generateSW mode, registerType
'autoUpdate' — new SW activates on next page load, no upgrade prompt
(chat needs to stay fresh).
• @vite-pwa/assets-generator for icon variants from a single SVG.
Source kez-icon.svg = dark squircle (#111827) + amber key glyph,
drawn inside the 80% maskable safe zone.
Caching:
• Precaches the SPA shell (~635 KB inc. the zstd WASM, well under
the 5 MB per-file cap).
• runtimeCaching 'NetworkOnly' for /v1/* — never cache authenticated
chat data; every poll must hit the network.
• navigateFallback to index.html so /messages, /claims, /dashboard
survive a refresh while offline. The /v1/, /internal/, /.well-known/
paths are explicitly denylisted from this fallback.
Meta tags (index.html):
• <link rel="manifest"> + theme-color for Android Chrome.
• apple-touch-icon-180x180 + apple-mobile-web-app-* meta for iOS,
including status-bar-style=black-translucent so the dark header
flows into the notch area in standalone.
• viewport-fit=cover so safe-area-inset works on notched devices.
Generated artifacts committed under web/public/:
kez-icon.svg, pwa-{64,192,512}.png, maskable-icon-512x512.png,
apple-touch-icon-180x180.png, favicon.ico.
Verified live: /manifest.webmanifest serves application/manifest+json,
/sw.js serves text/javascript, all icons return 200.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
18 lines
926 B
XML
18 lines
926 B
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<!-- Solid background. 20% padding around the glyph leaves the safe
|
|
area for Android "maskable" icons (radial crops, squircle, etc.). -->
|
|
<rect width="512" height="512" rx="96" ry="96" fill="#111827"/>
|
|
<!-- A simple key shape: round bow + rectangular shaft + two teeth.
|
|
Drawn at the center; bounding box ~280px wide, well inside the 80%
|
|
safe zone (~410px diameter). -->
|
|
<g transform="translate(106 156)" fill="none" stroke="#fbbf24" stroke-width="28" stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Bow (ring) -->
|
|
<circle cx="80" cy="100" r="64"/>
|
|
<!-- Shaft (rounded line from the bow to the right edge) -->
|
|
<line x1="144" y1="100" x2="300" y2="100"/>
|
|
<!-- Two teeth on the bottom of the shaft -->
|
|
<line x1="240" y1="100" x2="240" y2="140"/>
|
|
<line x1="280" y1="100" x2="280" y2="156"/>
|
|
</g>
|
|
</svg>
|