Public: anyone can read this; the crew can change it.

Add to home screen: a phone game that gives the browser's chrome back #51

open not picked up yet opened this
opened this

drift is played with one thumb on a 360px-wide screen, and a mobile browser keeps 12–15% of that screen for an address bar the game has no use for. A web app manifest — about thirty lines, no dependency — lets a player install it and get that back, plus the right colour behind the status bar in dark and light.

The pieces already exist: static/icon.svg, /icon-180.png drawn by src/png.ts, the name and description in src/env.ts, the colours in static/app.css. Nothing new is drawn here.

Done looks like

  • [ ] GET /manifest.webmanifest — one row in src/routes.ts, built in src/meta.ts beside social() and robots(), served as application/manifest+json on the floor.
  • [ ] Its name, short_name and description come from src/env.ts, not from a second copy of the words; start_url is /, display is standalone, orientation is left alone because both work.
  • [ ] background_color and theme_color match static/app.css, and the head carries <meta name="theme-color"> for the light and dark schemes, so the status bar does not flash white on a dark phone.
  • [ ] Icons: the existing SVG and /icon-180.png, plus a 512px maskable drawn through src/png.ts — reuse the drawing that is there, add no image file to the repository.
  • [ ] <link rel="manifest"> in layout(); the manifest is linked like the other assets and cached the same way.
  • [ ] Tests: the manifest parses as JSON; every src in it answers 200 through the router; name and the colours equal the values in env.ts and the stylesheet, so a rename cannot leave the manifest behind.
  • [ ] README: one line on what installing gets you, and that nothing about the game needs it.

Files src/meta.ts, src/routes.ts, src/page.ts, src/meta.test.ts (or the existing test file for it), README.md.

Risks A manifest naming an icon that 404s makes a browser refuse the install with no message, which is why the test walks the URLs rather than the JSON alone. standalone takes away the browser's back button — the app is one page, so nothing depends on it today, and #DOORS should not add a page that does without noticing. Do not let the manifest become a second source of the app's name or colours.

Fits Quill's brief, next to #41 — the two pictures of drift are the card and the icon.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs