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
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:
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "Эрудит (Скрэббл)",
|
||||
"short_name": "Эрудит",
|
||||
"description": "Игра в слова «Эрудит» (Скрэббл): играйте с друзьями, случайным соперником или ИИ-роботом.",
|
||||
"lang": "ru",
|
||||
"dir": "ltr",
|
||||
"start_url": ".",
|
||||
"scope": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#f3f4f6",
|
||||
"theme_color": "#f3f4f6",
|
||||
"icons": [
|
||||
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
// Install-only service worker.
|
||||
//
|
||||
// Its sole job today is to satisfy Chromium's PWA installability requirement (a registered
|
||||
// service worker with a fetch handler) so the web app can be installed to the home screen /
|
||||
// desktop — notably on Android, where the manifest alone is not enough. It deliberately does
|
||||
// NOT cache assets or the Connect-RPC stream: only top-level navigations are handled,
|
||||
// network-first with a cached-shell fallback, so the live app, its immutable hashed assets and
|
||||
// the live event stream are never served stale.
|
||||
//
|
||||
// This is the single designated growth point for the planned offline mode (a Settings toggle,
|
||||
// default online — see docs/ARCHITECTURE.md). Extend the fetch router here; keep the same
|
||||
// /app/ scope; gate any real caching behind the toggle and coordinate updates with the boot
|
||||
// version guard.
|
||||
const SHELL = 'scrabble-shell-v1'; // bump only when the SW strategy itself changes.
|
||||
|
||||
self.addEventListener('install', () => {
|
||||
// No cached content to migrate carefully, so activate the new worker immediately.
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
(async () => {
|
||||
const keys = await caches.keys();
|
||||
await Promise.all(keys.filter((k) => k !== SHELL).map((k) => caches.delete(k)));
|
||||
await self.clients.claim();
|
||||
})(),
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const req = event.request;
|
||||
// Only top-level navigations are handled. Hashed assets and the Connect-RPC requests are
|
||||
// left untouched (no respondWith -> the browser performs its default fetch), so the worker
|
||||
// can never break the live stream or serve a stale immutable asset.
|
||||
if (req.mode !== 'navigate') return;
|
||||
event.respondWith(
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(req);
|
||||
const cache = await caches.open(SHELL);
|
||||
// One shell entry regardless of the deep-link path: the hash router resolves the route
|
||||
// client-side, so any offline navigation can be served the same cached shell.
|
||||
cache.put('shell', res.clone());
|
||||
return res;
|
||||
} catch {
|
||||
const cache = await caches.open(SHELL);
|
||||
const cached = await cache.match('shell');
|
||||
return cached ?? Response.error();
|
||||
}
|
||||
})(),
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user