feat(pwa): installable web app + landing web entry

Make the web SPA an installable PWA and surface it to users: - manifest.webmanifest + an install-only service worker + 192/512/maskable icons (ui/public); PWA head tags in index.html; the .webmanifest MIME type registered in the gateway (the distroless image has no /etc/mime.types). - Platform-adaptive install CTA (components/InstallApp.svelte + lib/pwa): one-tap on Chromium, manual Add-to-Home-Screen instructions on iOS Safari, hidden elsewhere / once installed / inside a Mini App. Shown under the logged-out login card and at the bottom of Settings. - The landing gains a third entry linking /app/ (the brand tile), with a caption under all three (Telegram / VK / Веб-версия). The service worker is navigation-only (network-first, cached-shell fallback); hashed assets and the Connect stream are untouched. It exists to satisfy Chromium's installability requirement and is the single growth point for a future opt-in offline mode. Tests: pwa.ts unit tests; a webui probe (manifest/sw.js content-type + the SPA-fallback-to-HTML trap); e2e for the one-tap CTA, the iOS instructions modal and the landing web entry. Docs: ARCHITECTURE §13, FUNCTIONAL (+ru), gateway README.
2026-07-05 21:05:52 +02:00
parent d61ba68e9b
commit 51147a1429
26 changed files with 662 additions and 29 deletions
@@ -256,6 +256,18 @@
    <link rel="icon" href="favicon.ico" sizes="32x32" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+    <!-- PWA installability (web /app/ only): the manifest + a service worker (registered from
+         lib/pwa, web-only) let the app be added to the home screen / desktop. The relative href
+         resolves per serving path; these tags are inert inside the Telegram/VK Mini App webviews,
+         which manage their own chrome. theme-color mirrors the light/dark --bg tokens (app.css). -->
+    <link rel="manifest" href="manifest.webmanifest" />
+    <meta name="theme-color" content="#f3f4f6" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0f1115" media="(prefers-color-scheme: dark)" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Эрудит" />
+    <meta name="application-name" content="Эрудит" />
  </head>
  <body>
    <div id="app"></div>