Files
galaxy-game/ui/frontend/src/app.html
T
Ilia Denisov 04c7f6e68a
Tests · UI / test (push) Failing after 7m31s
feat(ui): installable offline PWA — service worker, manifest, icons (F5)
Native SvelteKit service worker (src/service-worker.ts): a version-keyed
cache precaches the app shell + build artefacts (incl. core.wasm) +
static files; activate purges old caches; the gateway is never
intercepted; navigations fall back to the cached shell offline. Adds
static/manifest.webmanifest, a generated placeholder icon set
(scripts/gen-pwa-icons.mjs — dependency-free pure-Node PNG encoder), and
manifest / theme-color / apple-touch tags in app.html.

Gated by Playwright against a production preview (playwright.pwa.config.ts
+ tests/pwa/pwa.spec.ts via `pnpm test:pwa`, wired into ui-test):
manifest + installable icons, SW registration + a single version-keyed
cache, and offline shell load. Lighthouse is not used — its PWA category
was removed in v12.

Docs: ui/docs/pwa-strategy.md (+ index); F5 marked done.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-22 15:46:42 +02:00

55 lines
1.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
<link
rel="apple-touch-icon"
href="%sveltekit.assets%/icons/apple-touch-icon-180.png"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#0a0e1a"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#f3f5fb"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Galaxy</title>
<style>
html,
body {
margin: 0;
}
</style>
<script>
// Pre-paint theme guard: resolve the stored theme choice before
// the app boots so first paint matches and never flashes. Mirrors
// $lib/theme/theme.svelte.ts; keep the two in sync.
(function () {
try {
var c = localStorage.getItem("galaxy-theme");
var resolved =
c === "light" || c === "dark"
? c
: window.matchMedia &&
window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
document.documentElement.dataset.theme = resolved;
} catch (e) {
document.documentElement.dataset.theme = "dark";
}
})();
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>