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

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.
2026-06-20 08:42:29 -05:00
parent 81ed6cbbab
commit 0490910687
10 changed files with 78 additions and 5 deletions
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- PWA / home-screen app icon. Full-bleed opaque #0b1118 square (the brand base color,
+     reserved as the PWA theme_color in design/tokens.tokens.json) with the white "T31"
+     mark centered inside the maskable safe zone (inner ~80%), so the SAME asset works
+     un-cropped (purpose "any"), masked by Android (purpose "maskable"), and rounded by
+     iOS (apple-touch-icon). No inner border/rounding — the OS applies its own. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Ten31">
+  <rect x="0" y="0" width="64" height="64" fill="#0b1118"/>
+  <text x="32" y="41" text-anchor="middle" fill="#ffffff" font-size="26" font-weight="700" font-family="Georgia, 'Times New Roman', serif">T31</text>
+</svg>
@@ -2,10 +2,23 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- viewport-fit=cover lets env(safe-area-inset-*) return real values on notched
+         iPhones, so the bottom tab bar's existing safe-area padding actually clears the
+         home indicator when launched as a standalone PWA. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>Ten31 database</title>
    <link rel="icon" type="image/png" href="/assets/ten31-inverted-square.png">
    <link rel="shortcut icon" href="/assets/ten31-inverted-square.png">
+    <!-- PWA: home-screen install + standalone (full-screen, no browser chrome). iOS-first,
+         no service worker (see ROADMAP "Mobile PWA"). theme_color = the brand base #0b1118
+         reserved in design/tokens.tokens.json. iOS status bar is solid black (not
+         translucent) so content never slides under the notch. -->
+    <link rel="manifest" href="/manifest.webmanifest">
+    <meta name="theme-color" content="#0b1118">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Ten31">
+    <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
    <!-- Vendored + SRI-pinned (v0.1.0:82). These ship inside the s9pk and are served
         same-origin from /assets/vendor/, so a CDN can never swap our prod deps (the
         v78/v79 blank-screen class) and the box needs no outbound internet to render.
@@ -0,0 +1,17 @@
+{
+  "name": "Ten31 CRM",
+  "short_name": "Ten31",
+  "description": "Ten31 Venture fundraising CRM — investors, pipeline, reminders, contacts.",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#0b1118",
+  "theme_color": "#0b1118",
+  "icons": [
+    { "src": "/assets/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/assets/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/assets/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}