Input HarborISSUE #41 of 46

manifest · turning a page into an app

FormaVSCaptain Invalid Input

Forma saysA web app manifest is a JSON file that lets users install your site to their home screen like a native app.

Link a manifest.json with <link rel="manifest" href="manifest.json">. It declares name, icons, start_url, display:"standalone", and theme_color.

With a manifest plus a service worker, browsers offer "Install" / "Add to Home Screen", and the app launches in its own window without browser chrome — indistinguishable from a native app at a glance. The manifest defines how the installed app presents itself.

Power-ups you unlock

<link rel="manifest" href="manifest.json"> connects it
name, icons, start_url, display, theme_color
display:"standalone" hides browser chrome when installed
Manifest + service worker = an installable PWA

Captain Invalid Input attacks — common mistakes

Missing the required icon sizes (192 & 512) → no install prompt
Wrong start_url path → app opens the wrong page
Expecting install without also registering a service worker

Boss battleWrite a minimal manifest.json (name, two icon sizes, start_url, standalone) and link it from the head.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px">
  <pre>&lt;link rel="manifest" href="manifest.json"&gt;

// manifest.json
{
  "name": "After Hours Academy",
  "short_name": "Academy",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#b388ff",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}</pre>
</body></html>

▶ Open the interactive comic issue

‹ Service Workers · The Offline Surface Tag Reference · The Full Element List ›