Ilia Denisov
2729fe9467
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 1m6s
CI / conformance (pull_request) Successful in 8s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m55s
Replace the temporary on-device boot diagnostic (the always-on overlay, the
console.error mirror and the handleError console hook) with a permanent boot-capability
guard in index.html. Before the deferred module, in plain ES5, it:
- hard-gates on the unpolyfillable essentials the app cannot run without — BigInt (the
64-bit FlatBuffers wire decode) and Proxy (Svelte 5 runes) — and, when one is
missing, shows a friendly full-screen "this device's OS/browser can't run the app"
screen instead of a white screen;
- soft-gates the polyfillable es2020+ globals, pulling core-js (polyfills.js) only
when needed (the previous behaviour, folded in);
- keeps a reactive net: an uncaught error during boot with no window.__booted signal
within 8s raises the same screen with the captured cause.
Inside a Telegram/VK Mini App the screen also points to the web version
(https://<host>/app/). A "Diagnostic information" button reveals the engine, the
feature table, the reason and the app version, with a Copy button.
App.svelte sets window.__booted once bootstrap resolves. vite.config drops the
now-unneeded strip-boot-diag plugin and adds inject-boot-version (stamps the guard's
diagnostic with VITE_APP_VERSION). The es2019 target, the core-js loader and the board
cqw->vmin glyph fallback stay. The speculative Chrome-74 pan change is reverted — it did
not fix the judder and added nothing on modern engines.
Verified: svelte-check clean, unit + mock e2e green (the guard is inert on a capable
engine, so the size budget and the smoke are untouched), and the screen + diagnostic +
stamped version render on a forced hard-gate (BigInt removed via addInitScript).
The unsupported-engine telemetry beacon (dedup + edge rate-limit + a Prometheus counter)
is a separate follow-up PR, per the agreed split.
234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- Boot capability guard. Runs before the deferred ES module, in plain ES5 so it survives even
|
|
on an engine too old to parse the bundle. Three jobs, as early as possible:
|
|
1. Hard gate — if an UNPOLYFILLABLE essential is missing (BigInt for the 64-bit
|
|
FlatBuffers wire decode, Proxy for Svelte 5 runes) the app cannot run at all: show the
|
|
unsupported-engine screen (an old Android System WebView, e.g. Chromium 66, is the case
|
|
this guards) instead of a white screen.
|
|
2. Soft gate — if only polyfillable es2020+ globals are missing (globalThis,
|
|
structuredClone, Array.at, …) pull core-js (emitted as polyfills.js) BEFORE the module
|
|
runs. document.write is deliberate: the only way to inject a parser-blocking <script>
|
|
guaranteed to run ahead of a deferred module; its argument is a static literal, so no
|
|
injection surface.
|
|
3. Reactive net — record any uncaught error/rejection during boot; if the app has not
|
|
signalled window.__booted within a grace period AND an error fired, show the same
|
|
screen with the captured cause (covers a bundle that fails to parse, or an unforeseen
|
|
incompatibility). __booted is set in App.svelte once bootstrap resolves.
|
|
The screen has a "Diagnostic information" view (engine + feature table + reason + version)
|
|
with a Copy button. On a capable engine nothing here renders, so neither the bundle-size
|
|
budget nor the mock e2e is affected. -->
|
|
<script>
|
|
(function () {
|
|
'use strict';
|
|
var nav = navigator;
|
|
var ua = nav.userAgent || '';
|
|
var VERSION = '__BOOT_VERSION__'; // replaced at build (vite.config injectBootVersion)
|
|
var RU = (nav.language || '').toLowerCase().indexOf('ru') === 0;
|
|
var MINIAPP = /\/(?:telegram|vk)\//.test(location.pathname);
|
|
var WEBURL = location.protocol + '//' + location.host + '/app/';
|
|
|
|
// [label, test, Chrome version it landed in, hard?] — hard = required and unpolyfillable.
|
|
function has(fn) {
|
|
try {
|
|
return !!fn();
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}
|
|
var probes = [
|
|
['BigInt', function () { return typeof BigInt !== 'undefined'; }, 67, true],
|
|
['Proxy', function () { return typeof Proxy !== 'undefined'; }, 49, true],
|
|
['globalThis', function () { return typeof globalThis !== 'undefined'; }, 71, false],
|
|
['structuredClone', function () { return typeof structuredClone === 'function'; }, 98, false],
|
|
['Array.prototype.at', function () { return typeof [].at === 'function'; }, 92, false],
|
|
['Array.prototype.findLast', function () { return typeof [].findLast === 'function'; }, 97, false],
|
|
['Object.hasOwn', function () { return typeof Object.hasOwn === 'function'; }, 93, false],
|
|
['Object.fromEntries', function () { return typeof Object.fromEntries === 'function'; }, 73, false],
|
|
['Promise.allSettled', function () { return !!Promise.allSettled; }, 76, false],
|
|
['Promise.any', function () { return !!Promise.any; }, 85, false],
|
|
['WeakRef', function () { return typeof WeakRef !== 'undefined'; }, 84, false],
|
|
['queueMicrotask', function () { return typeof queueMicrotask === 'function'; }, 71, false]
|
|
];
|
|
var results = [];
|
|
var hardMissing = [];
|
|
var softMissing = false;
|
|
for (var i = 0; i < probes.length; i++) {
|
|
var ok = has(probes[i][1]);
|
|
results.push({ name: probes[i][0], ok: ok, chrome: probes[i][2], hard: probes[i][3] });
|
|
if (!ok) {
|
|
if (probes[i][3]) hardMissing.push(probes[i][0]);
|
|
else softMissing = true;
|
|
}
|
|
}
|
|
|
|
// The diagnostic report (built on demand, behind the button).
|
|
function diag(reason) {
|
|
var cm = /Chrom(?:e|ium)\/(\d+)/.exec(ua);
|
|
var wv = /;\s*wv\)/.test(ua) || /\bwv\b/.test(ua);
|
|
var out = [];
|
|
out.push('reason : ' + reason);
|
|
out.push('app : ' + VERSION);
|
|
out.push('chromium : ' + (cm ? cm[1] : 'n/a') + (wv ? ' (Android WebView)' : ''));
|
|
out.push('userAgent : ' + ua);
|
|
out.push('url : ' + location.href);
|
|
out.push('viewport : ' + window.innerWidth + 'x' + window.innerHeight + ' @' + (window.devicePixelRatio || 1));
|
|
out.push('lang : ' + (nav.language || '?') + ' online: ' + nav.onLine);
|
|
out.push('');
|
|
out.push('features:');
|
|
for (var k = 0; k < results.length; k++) {
|
|
var r = results[k];
|
|
out.push(' ' + (r.ok ? 'OK' : 'NO') + ' ' + r.name + ' (' + (r.hard ? 'required' : 'polyfilled') + ', Chrome ' + r.chrome + ')');
|
|
}
|
|
return out.join('\n');
|
|
}
|
|
|
|
function el(tag, style, text) {
|
|
var e = document.createElement(tag);
|
|
if (style) e.setAttribute('style', style);
|
|
if (text != null) e.appendChild(document.createTextNode(text));
|
|
return e;
|
|
}
|
|
function btn(bg, fg) {
|
|
return 'display:inline-block;margin:0 10px 10px 0;padding:11px 18px;border:0;border-radius:8px;' +
|
|
'font:600 15px/1 inherit;cursor:pointer;color:' + fg + ';background:' + bg + ';';
|
|
}
|
|
|
|
var shown = false;
|
|
function show(reason) {
|
|
if (shown) return;
|
|
shown = true;
|
|
var root = el('div', 'position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483647;overflow:auto;' +
|
|
'-webkit-overflow-scrolling:touch;background:#0f1115;color:#e8eaed;box-sizing:border-box;padding:24px;' +
|
|
'font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;');
|
|
var wrap = el('div', 'max-width:520px;margin:0 auto;');
|
|
root.appendChild(wrap);
|
|
|
|
var msg = el('div', null);
|
|
msg.appendChild(el('div', 'font-size:22px;font-weight:700;margin-bottom:14px;', 'Эрудит'));
|
|
msg.appendChild(el('p', 'margin:0 0 14px;', RU
|
|
? 'На вашей версии операционной системы или браузера приложение не сможет работать.'
|
|
: "This app can't run on your device's operating system or browser version."));
|
|
if (MINIAPP) {
|
|
msg.appendChild(el('p', 'margin:0 0 6px;', RU
|
|
? 'Откройте веб-версию в обычном браузере (Chrome, Firefox):'
|
|
: 'Open the web version in a regular browser (Chrome, Firefox):'));
|
|
var a = el('a', 'color:#8ab4ff;word-break:break-all;', WEBURL);
|
|
a.setAttribute('href', WEBURL);
|
|
a.setAttribute('target', '_blank');
|
|
a.setAttribute('rel', 'noopener');
|
|
var lp = el('p', 'margin:0 0 18px;');
|
|
lp.appendChild(a);
|
|
msg.appendChild(lp);
|
|
}
|
|
var infoBtn = el('button', btn('#2a2f3a', '#e8eaed'), RU ? 'Диагностическая информация' : 'Diagnostic information');
|
|
msg.appendChild(infoBtn);
|
|
wrap.appendChild(msg);
|
|
|
|
var dv = el('div', 'display:none;');
|
|
var pre = el('pre', 'white-space:pre-wrap;word-break:break-word;background:#0b0d11;border-radius:8px;padding:12px;' +
|
|
'font:12.5px/1.45 ui-monospace,Menlo,Consolas,monospace;overflow:auto;', diag(reason));
|
|
dv.appendChild(pre);
|
|
var copyBtn = el('button', btn('#8ab4ff', '#0b0d11'), RU ? 'Копировать' : 'Copy');
|
|
var backBtn = el('button', btn('#2a2f3a', '#e8eaed'), RU ? 'Назад' : 'Back');
|
|
var row = el('div', 'margin-top:12px;');
|
|
row.appendChild(copyBtn);
|
|
row.appendChild(backBtn);
|
|
dv.appendChild(row);
|
|
wrap.appendChild(dv);
|
|
|
|
infoBtn.onclick = function () {
|
|
msg.style.display = 'none';
|
|
dv.style.display = 'block';
|
|
};
|
|
backBtn.onclick = function () {
|
|
dv.style.display = 'none';
|
|
msg.style.display = 'block';
|
|
};
|
|
copyBtn.onclick = function () {
|
|
var txt = diag(reason);
|
|
try {
|
|
if (nav.clipboard && nav.clipboard.writeText) {
|
|
nav.clipboard.writeText(txt);
|
|
copyBtn.firstChild.nodeValue = RU ? 'Скопировано' : 'Copied';
|
|
return;
|
|
}
|
|
} catch (e) {}
|
|
try {
|
|
var ta = document.createElement('textarea');
|
|
ta.value = txt;
|
|
ta.setAttribute('style', 'position:fixed;left:-9999px;top:0;');
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
copyBtn.firstChild.nodeValue = RU ? 'Скопировано' : 'Copied';
|
|
} catch (e2) {
|
|
copyBtn.firstChild.nodeValue = RU ? 'Выделите и скопируйте текст' : 'Select and copy the text';
|
|
}
|
|
};
|
|
|
|
function mount() {
|
|
document.body.insertBefore(root, document.body.firstChild);
|
|
}
|
|
if (document.body) mount();
|
|
else document.addEventListener('DOMContentLoaded', mount);
|
|
}
|
|
|
|
// 1 + 2: the gate.
|
|
if (hardMissing.length) {
|
|
show((RU ? 'нет: ' : 'missing: ') + hardMissing.join(', '));
|
|
} else if (softMissing) {
|
|
document.write('<script src="polyfills.js"><\/script>');
|
|
}
|
|
|
|
// 3: the reactive net for an unforeseen boot failure.
|
|
var bootErr = null;
|
|
function note(m) {
|
|
if (!bootErr) bootErr = m;
|
|
}
|
|
window.onerror = function (m, s, l, c, e) {
|
|
note(String(m) + (e && e.stack ? '\n' + e.stack : s ? ' @ ' + s + ':' + l : ''));
|
|
return false;
|
|
};
|
|
window.addEventListener('error', function (e) {
|
|
if (e && e.message) note(e.message + (e.filename ? ' @ ' + e.filename + ':' + e.lineno : ''));
|
|
}, true);
|
|
window.addEventListener('unhandledrejection', function (e) {
|
|
var r = e && e.reason;
|
|
note(r && (r.stack || r.message) ? r.stack || r.message : String(r));
|
|
});
|
|
setTimeout(function () {
|
|
if (!window.__booted && bootErr && !shown) show((RU ? 'ошибка запуска: ' : 'boot error: ') + bootErr);
|
|
}, 8000);
|
|
})();
|
|
</script>
|
|
<!-- The SPA shell is an empty client-rendered document behind the public landing — keep it
|
|
out of search indexes (robots.txt deliberately does NOT disallow /app/, so crawlers can
|
|
reach this tag). -->
|
|
<meta name="robots" content="noindex" />
|
|
<!-- The Telegram Mini App SDK (window.Telegram.WebApp) is deliberately NOT loaded here: a
|
|
render-blocking <script> to telegram.org hangs the whole page on a network that blocks
|
|
telegram.org (common where Telegram itself reaches users only over a proxy), stranding even
|
|
the launch-diagnostic screen. The app loads it dynamically, with a timeout, only on a
|
|
Telegram entry — see lib/telegram.ts loadTelegramSDK and lib/app.svelte.ts bootstrap. -->
|
|
<!-- user-scalable=no: the board owns zoom; we do not want the browser's pinch
|
|
to fight our two-state zoom. viewport-fit=cover for native (Capacitor). -->
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
|
/>
|
|
<title>Эрудит (Скрэббл)</title>
|
|
<!-- Relative icon hrefs: the gateway serves the same build under /app/, /telegram/ and /vk/. -->
|
|
<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" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|