Ilia Denisov
51147a1429
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.
86 lines
2.3 KiB
Svelte
86 lines
2.3 KiB
Svelte
<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>
|