Files
scrabble-game/ui/src/lib/share.ts
T
Ilia Denisov 88b6761e28
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m16s
fix(ui): copy GCG to clipboard on Android in-app WebViews
On-device diagnostics from Android Telegram and VK confirmed both expose
no navigator.share AND no navigator.canShare, so the export fell to a Blob
<a download> that those WebViews silently ignore — nothing happened.

pickGcgDelivery is now a 3-way decision: Web Share where available (iOS),
a clipboard copy in an Android in-app WebView (Telegram/VK: no share, dead
download), else a desktop Blob download. shareOrDownloadGcg reports the
outcome so the game shows a "GCG copied" toast; the copy is VKWebAppCopyText
inside VK (which also covers the desktop VK iframe, where navigator.clipboard
is blocked) and navigator.clipboard otherwise.

Unit tests cover the 3-way choice and the copy/failed outcomes; new i18n key
game.gcgCopied (en+ru); docs ARCHITECTURE/FUNCTIONAL(+ru)/UI_DESIGN/TESTING.
2026-07-01 13:17:00 +02:00

120 lines
5.0 KiB
TypeScript

// GCG export delivery: Web Share (with the file) on mobile where supported — including the iOS
// Telegram Mini App. An Android in-app WebView (Telegram / VK) has NO Web Share and silently ignores
// an <a download>, so there the tiny GCG text is copied to the clipboard instead; a plain desktop
// browser, where the anchor download works, still downloads a Blob. The Capacitor-native file save
// lands with the native wrapper. pickGcgDelivery is the pure decision, unit-tested with a mock
// navigator; the caller supplies the platform-aware clipboard copy.
import type { GcgExport } from './model';
type ShareNav = Pick<Navigator, 'canShare' | 'share'>;
/**
* pickGcgDelivery decides how to deliver the GCG file. Web Share (with the file) wins wherever it is
* available — the iOS Telegram Mini App and mobile browsers. Failing that, an in-app WebView (Android
* Telegram / VK) has no Web Share and silently ignores an <a download>, so the tiny GCG text is copied
* to the clipboard ('copy'); only a plain desktop browser, where the anchor download works, falls
* through to 'download'. Pure, so it is unit-tested with a mock navigator.
*/
export function pickGcgDelivery(
nav: ShareNav | undefined,
file: File,
inAppWebView: boolean,
): 'share' | 'copy' | 'download' {
if (
nav &&
typeof nav.canShare === 'function' &&
typeof nav.share === 'function' &&
nav.canShare({ files: [file] })
) {
return 'share';
}
return inAppWebView ? 'copy' : 'download';
}
/**
* shareOrDownloadGcg delivers the GCG export by the best available route and reports which it took —
* 'shared', 'copied', 'downloaded' or 'failed' — so the caller can confirm a silent copy to the user.
* inAppWebView marks an Android Telegram/VK WebView (no Web Share, a dead <a download>); copyText is
* the platform-aware clipboard write (VKWebAppCopyText inside VK, navigator.clipboard otherwise).
*/
export async function shareOrDownloadGcg(
gcg: GcgExport,
inAppWebView: boolean,
copyText: (text: string) => Promise<boolean>,
): Promise<'shared' | 'copied' | 'downloaded' | 'failed'> {
const file = new File([gcg.content], gcg.filename, { type: 'application/x-gcg' });
const nav = typeof navigator !== 'undefined' ? navigator : undefined;
const decision = pickGcgDelivery(nav, file, inAppWebView);
if (decision === 'share' && nav) {
// Web Share is available (mobile, including the iOS Telegram Mini App): use it and stop here
// whatever the outcome. Do NOT fall back to the Blob download — on iOS WKWebView an <a download>
// navigates the webview to the blob: URL, replacing the SPA with the raw file and stranding the
// app, so a cancelled or failed share must simply do nothing (the user can retry).
try {
await nav.share({ files: [file], title: gcg.filename });
} catch {
/* cancelled or failed — intentionally a no-op (see above) */
}
return 'shared';
}
if (decision === 'copy') {
// Android Telegram/VK: no Web Share and a dead <a download>, so copy the GCG text instead of
// silently issuing an anchor click that saves nothing.
return (await copyText(gcg.content)) ? 'copied' : 'failed';
}
downloadFile(gcg.content, gcg.filename);
return 'downloaded';
}
function downloadFile(content: string, filename: string): void {
if (typeof document === 'undefined') return;
const url = URL.createObjectURL(new Blob([content], { type: 'application/x-gcg' }));
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
type TextShareNav = Pick<Navigator, 'share'> & { canShare?: Navigator['canShare'] };
/**
* pickTextShare decides how to deliver a plain-text payload: through the OS share sheet (Web Share,
* available on mobile including the Telegram Mini App) or, on a desktop browser without it, a
* clipboard copy. Pure, so it is unit-tested with a mock navigator.
*/
export function pickTextShare(nav: TextShareNav | undefined): 'share' | 'copy' {
if (nav && typeof nav.share === 'function' && (typeof nav.canShare !== 'function' || nav.canShare({ text: 'x' }))) {
return 'share';
}
return 'copy';
}
/**
* shareText delivers text through the OS share sheet where supported, else copies it to the
* clipboard. It reports the path taken — 'shared', 'copied', or 'failed' (a cancelled share or an
* unavailable clipboard) — so the caller can confirm a silent copy to the user. Like
* shareOrDownloadGcg it never strands the webview: a cancelled share simply does nothing.
*/
export async function shareText(text: string, title: string): Promise<'shared' | 'copied' | 'failed'> {
const nav = typeof navigator !== 'undefined' ? navigator : undefined;
if (!nav) return 'failed';
if (pickTextShare(nav) === 'share') {
try {
await nav.share({ title, text });
return 'shared';
} catch {
return 'failed';
}
}
try {
await nav.clipboard.writeText(text);
return 'copied';
} catch {
return 'failed';
}
}