feat(pwa): installable web app + landing web entry
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 10s
CI / integration (pull_request) Successful in 19s
CI / ui (pull_request) Successful in 1m8s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m43s

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.
This commit is contained in:
Ilia Denisov
2026-07-05 21:05:52 +02:00
parent d61ba68e9b
commit 51147a1429
26 changed files with 662 additions and 29 deletions
+85
View File
@@ -0,0 +1,85 @@
<script lang="ts">
import { t } from '../lib/i18n/index.svelte';
import { installMode, promptInstall } from '../lib/pwa.svelte';
import Modal from './Modal.svelte';
// Platform-adaptive: 'oneTap' fires the native Chromium install dialog; 'iosInstructions' opens
// the manual Share -> Add-to-Home-Screen guide (iOS Safari has no programmatic install); 'hidden'
// renders nothing (already installed, inside a Telegram/VK Mini App, or an unsupported browser).
const mode = $derived(installMode());
let showIos = $state(false);
function onClick(): void {
// promptInstall must run synchronously from this gesture — the deferred prompt is gated on it.
if (mode === 'oneTap') void promptInstall();
else if (mode === 'iosInstructions') showIos = true;
}
</script>
{#if mode !== 'hidden'}
<button type="button" class="install" onclick={onClick}>
<img src="favicon.svg" alt="" width="40" height="40" />
<span class="text">
<span class="title">{t('install.title')}</span>
<span class="subtitle">{t('install.subtitle')}</span>
</span>
</button>
{/if}
{#if showIos}
<Modal title={t('install.iosTitle')} onclose={() => (showIos = false)}>
<ol class="steps">
<li>{t('install.iosStep1')}</li>
<li>{t('install.iosStep2')}</li>
<li>{t('install.iosStep3')}</li>
</ol>
<button type="button" class="ok" onclick={() => (showIos = false)}>{t('common.ok')}</button>
</Modal>
{/if}
<style>
.install {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.install img {
flex: none;
border-radius: 8px;
}
.text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.title {
font-weight: 600;
}
.subtitle {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.35;
}
.steps {
margin: 0 0 16px;
padding-left: 1.25rem;
line-height: 1.6;
}
.ok {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--accent-text);
border-radius: var(--radius-sm);
}
</style>