`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_522":523,"_524":525},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_385":-5,"_20":386,"_22":387,"_388":389,"_390":391,"_26":392,"_24":393,"_394":-5,"_395":-5,"_396":52,"_397":398,"_399":43,"_400":-5,"_401":-5,"_402":403},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dominik1","name","lista-zakupow","branchName","main","version","path","index.ts","project",{"_33":327,"_13":14,"_44":328,"_329":-5,"_330":52,"_331":332,"_333":332,"_334":335,"_336":-5,"_337":338,"_339":36,"_340":43,"_341":-5,"_342":-5,"_343":78,"_344":345,"_346":347,"_348":349,"_350":351,"_352":-5,"_353":354,"_355":354,"_356":357,"_358":357,"_359":357,"_360":354,"_361":354,"_362":363,"_364":365,"_366":367,"_368":52},"tree",[55,56,57,58,59,60],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":48,"_49":50,"_51":52,"_53":-5,"_18":54},"contents",[],"upstream","pull","ahead","behind","envVars","id","6f33b684-bb7c-4eb0-a541-0dfe822a393d","fileId","01a09c76-d795-72a1-be82-f37a11bb083f","parentId","branchId","2b7f7d5b-efff-44e5-9962-373315ac0749","branchVersion",27,"latest",true,"createdAt",["D",1789333870539],8,"fileType","http","content","import { immutableFileUrl, readFile, serveFile, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { login, requireSession } from \"./backend/auth.ts\";\nimport { applyOps, getState, initDb, saveSubscription } from \"./backend/db.ts\";\nimport { ICONS } from \"./backend/icons.ts\";\nimport { parseOps } from \"./backend/ops.ts\";\nimport { notifyEffects } from \"./backend/push.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { isPerson } from \"./shared/people.ts\";\nimport type { State } from \"./shared/types.ts\";\n\nawait initDb();\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\napp.get(\"/favicon.svg\", () => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\napp.get(\"/icons/:name\", (c) => {\n const base64 = ICONS[c.req.param(\"name\")];\n if (!base64) return c.notFound();\n const bytes = Uint8Array.from(atob(base64), (ch) => ch.charCodeAt(0));\n return c.body(bytes, 200, { \"Content-Type\": \"image/png\", \"Cache-Control\": \"public, max-age=604800\" });\n});\n\n// Lets the list be installed on the phone's home screen\napp.get(\"/manifest.webmanifest\", (c) =>\n c.json({\n name: \"Zakupy\",\n short_name: \"Zakupy\",\n lang: \"pl\",\n start_url: \"/\",\n display: \"standalone\",\n // dark by default: a dark status bar keeps the clock readable in both themes;\n // once the page loads, its theme-color meta follows the system theme\n theme_color: \"#0e1411\",\n background_color: \"#0e1411\",\n icons: [\n { src: \"/icons/icon-192.png\", sizes: \"192x192\", type: \"image/png\" },\n { src: \"/icons/icon-512.png\", sizes: \"512x512\", type: \"image/png\" },\n { src: \"/icons/icon-maskable-512.png\", sizes: \"512x512\", type: \"image/png\", purpose: \"maskable\" },\n ],\n }, 200, { \"Content-Type\": \"application/manifest+json\" }));\n\n// The service worker has to be served from the root to control the whole app.\n// The version stamp changes its bytes on every deploy, so phones pick up updates.\napp.get(\"/sw.js\", async (c) => {\n const source = await readFile(\"/frontend/sw.js\", import.meta.url);\n const version = immutableFileUrl(\"/frontend/sw.js\").split(\"/\")[2];\n return c.body(`const VERSION = ${JSON.stringify(version)};\\n${source}`, 200, {\n \"Content-Type\": \"text/javascript; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n });\n});\n\n// ---------- API ----------\n\napp.post(\"/api/login\", login);\napp.use(\"/api/*\", requireSession);\n\nconst withPushKey = (state: State) => ({ ...state, vapidPublicKey: Deno.env.get(\"VAPID_PUBLIC_KEY\") ?? null });\n\napp.get(\"/api/state\", async (c) => c.json(withPushKey(await getState())));\n\napp.post(\"/api/ops\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const ops = parseOps(body?.ops);\n if (!ops) return c.json({ error: \"Nieprawidłowe zmiany.\" }, 400);\n const effects = await applyOps(ops);\n try {\n await notifyEffects(effects);\n } catch (err) {\n // a failed notification must not make the phone resend its changes\n console.error(\"Notifications failed\", err);\n }\n return c.json(withPushKey(await getState()));\n});\n\n// Only real push services, so the server never posts to arbitrary URLs\nconst PUSH_HOST =\n /^(fcm\\.googleapis\\.com|android\\.googleapis\\.com|updates\\.push\\.services\\.mozilla\\.com|[\\w.-]+\\.push\\.apple\\.com|[\\w.-]+\\.notify\\.windows\\.com)$/;\n\napp.post(\"/api/push\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const endpoint = body?.subscription?.endpoint;\n const p256dh = body?.subscription?.keys?.p256dh;\n const auth = body?.subscription?.keys?.auth;\n let validHost = false;\n try {\n const url = new URL(endpoint);\n validHost = url.protocol === \"https:\" && PUSH_HOST.test(url.hostname);\n } catch {\n // not a URL\n }\n if (!validHost || typeof p256dh !== \"string\" || typeof auth !== \"string\" || !isPerson(body?.by)) {\n return c.json({ error: \"Nieprawidłowa subskrypcja powiadomień.\" }, 400);\n }\n await saveSubscription(endpoint, p256dh, auth, body.by);\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","deleted",false,"label",[19],{"_33":282,"_13":283,"_35":284,"_37":-5,"_38":39,"_40":164,"_42":43,"_44":285,"_17":78,"_47":86,"_49":-5,"_51":52,"_53":-5,"_62":286,"_18":287},{"_33":106,"_13":107,"_35":108,"_37":-5,"_38":39,"_40":76,"_42":43,"_44":109,"_17":78,"_47":86,"_49":-5,"_51":52,"_53":-5,"_62":110,"_18":111},{"_33":82,"_13":83,"_35":84,"_37":-5,"_38":39,"_40":69,"_42":43,"_44":85,"_17":78,"_47":86,"_49":-5,"_51":52,"_53":-5,"_62":87,"_18":88},{"_33":73,"_13":74,"_35":75,"_37":-5,"_38":39,"_40":76,"_42":43,"_44":77,"_17":78,"_47":24,"_49":79,"_51":52,"_53":-5,"_62":80,"_18":81},{"_33":65,"_13":66,"_35":67,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":68,"_17":69,"_47":24,"_49":70,"_51":52,"_53":-5,"_62":71,"_18":72},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":61,"_17":46,"_47":48,"_49":50,"_51":52,"_53":-5,"_62":63,"_18":64},["D",1789333870539],"children",[],[19],"83a36678-ba87-4a70-8aaa-b75c0fcc44b0","README.md","01a09c76-d794-7474-b4e3-6ff2da2d6b8a",["D",1789333870539],2,"# Zakupy — wspólna lista Agi i Dominika\n\nMobilna lista zakupów (Android, instalowana jako aplikacja) synchronizowana między telefonami.\n\n- **PIN** — lista otwiera się dopiero po wpisaniu PIN-u; telefon pamięta go przez rok od ostatniego użycia.\n- Dotknięcie produktu = kupione (przekreślenie w kolorze osoby, która kupiła).\n- **Cofnij** — usunięcie produktu lub „Usuń kupione” można cofnąć przez 5 sekund.\n- **Jestem w sklepie** — druga osoba widzi status na górze listy i dostaje powiadomienie.\n- **Powiadomienia push** — gdy ktoś jest w sklepie, a druga osoba dopisze produkty.\n- **Offline** — aplikacja startuje bez sieci, a zmiany czekają w kolejce na telefonie i wysyłają się same po powrocie połączenia.\n\n## Zmienne środowiskowe\n\n- `LISTA_PIN` — PIN do listy. Zmiana wylogowuje wszystkie telefony.\n- `SESSION_SECRET` — klucz do podpisywania ciasteczka sesji.\n- `VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY` — klucze Web Push. Zmiana wymaga ponownego włączenia powiadomień na telefonach.\n\n👉 Add LISTA_PIN here: https://www.val.town/x/dominik1/lista-zakupow/environment-variables?key=LISTA_PIN\n\n## Struktura\n\n- `index.ts` — serwer Hono: strona, manifest, ikony, service worker, API\n- `backend/db.ts` — SQLite (lista, historia, status zakupów, subskrypcje push, próby PIN-u)\n- `backend/auth.ts` — PIN i ciasteczko sesji\n- `backend/ops.ts` — walidacja zmian przysyłanych z telefonów\n- `backend/push.ts` — powiadomienia Web Push\n- `shared/` — typy i logika zmian wspólna dla serwera i przeglądarki\n- `frontend/sync.ts` — kolejka zmian offline i synchronizacja\n- `frontend/sw.js` — service worker (praca offline, powiadomienia)\n- `frontend/components/` — interfejs React\n",[],[66],"8dcda787-8b81-4f00-856a-887038e54765","CHANGELOG.md","01a09c76-d794-7474-b4e3-6a43e57cbd5c",1,["D",1789331428995],0,"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n