Agent Wranglers

When things break Recommended

Let people install the site

Publish a web app manifest with a name, start address, colours, and 192 and 512 px icons, including a maskable one.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Serve site.webmanifest as application/manifest+json and link it from the head. Include name, short_name, start_url, display, colours, and any and maskable icons.

Example

{
  "name": "Example Studio",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2347d6",
  "background_color": "#ffffff",
  "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.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}
<link rel="manifest" href="/site.webmanifest">

How to check

DevTools › Application › Manifest shows no errors.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/when-things-break/pwa-manifest.