grant/ten31-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add installable PWA (Option A — iPhone-first, no service worker)

Browse Source 
Make the app installable to the iOS home screen and launch standalone
(full-screen, no browser chrome, dark status bar). Add manifest.webmanifest,
square app icons (ten31-app-icon.svg -> 192/512/apple-touch-icon), the
apple-mobile-web-app + manifest <head> tags, viewport-fit=cover, and a
pre-auth /manifest.webmanifest route. No service worker by design.
This commit is contained in:
Keysat
2026-06-20 08:42:29 -05:00
parent 81ed6cbbab
commit 0490910687
10 changed files with 78 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ROADMAP.md
+27
View File
@@ -280,6 +280,33 @@ backlog. **Scoped 2026-06-19 (plan below); not yet started.**
The comps are signed-off prototypes, **not drop-in** (Claude Design runtime, seed data) — each
surface is re-authored in the app's React idiom and wired to the **real API**.*
#### Mobile PWA — installable home-screen app — BUILT 2026-06-20 (deploy pending)
**Option A (iPhone-first, no service worker).** Makes the app installable to the iOS home
screen and launch **standalone** (full-screen, no Safari chrome, dark themed status bar,
splash). Shipped: `frontend/manifest.webmanifest` (`display:standalone`, `start_url:/`,
`theme_color`/`background_color` = the brand base `#0b1118` already reserved for this in
`design/tokens.tokens.json`); square icons generated from `ten31-app-icon.svg` (full-bleed
`#0b1118` + white "T31", maskable-safe) → `icon-192.png`/`icon-512.png`/`apple-touch-icon.png`
(180); `<head>` gains `rel=manifest`, `theme-color`, the `apple-mobile-web-app-*` metas
(status bar `black` — opaque, so content never slides under the notch), `apple-touch-icon`,
and `viewport-fit=cover` (so the tab bar's existing `env(safe-area-inset-bottom)` clears the
home indicator). One pre-auth backend route serves `/manifest.webmanifest` as
`application/manifest+json` (`backend/server.py`); icons serve via the existing `/assets/`
handler. **No service worker** — on iOS the install prompt doesn't exist regardless (A2HS is
always manual via Share), standalone display needs none, and a cache-first SW would reintroduce
the stale-shell class the render-smoke gate guards against. Verified: render-smoke green +
live-curl (manifest + icons 200 pre-auth, correct content-types). **Deploy:** ships in the
next s9pk with the mobile phases.
- **Known minor:** the iOS status bar is fixed `black` at launch (can't follow the in-app
light/dark toggle); a barely-perceptible seam vs the `#0b1118` app. Acceptable; dark is default.
- **Deferred (not needed for iPhone):** a network-first service worker → Android's "Install"
prompt + faster relaunches; the JSX-precompile build-step (ROADMAP below) is the better lever
if relaunch speed is ever a felt problem.
- **Adjacent issue (not PWA, noted while here):** a phone in **landscape** can exceed the 768px
breakpoint and render the *desktop* layout; `orientation:portrait` in the manifest hints at
this but iOS ignores it for home-screen apps. Revisit if it bites during device-testing.
#### Phase 8 — conform to the FINAL Claude Design mockups (mobile) — **NEXT SESSION (scoped 2026-06-19)**
*Phases 0–7 built the mobile surfaces + light theme. Phase 8 closes the gap to the **final** design + functional parity. Two independent agent passes ran 2026-06-19 (functional-parity + visual-conformance); their findings + the source-of-truth correction below drive this plan.*