PWA manifest generator and every manifest field explained

#Generate a manifest

Two free ways, both from installkite. In the browser, the manifest and icon generator takes your logo, name and colors, previews the icon on Android, iOS and desktop, and downloads a zip with the manifest, every icon and the head tags. Nothing is uploaded. On the command line, inside your site:

npx installkite init --name "Acme Bakery" --short-name Acme --theme-color "#e8590c"

The CLI also writes the service worker and links everything from your pages. Here is a typical result:

{
  "id": "./",
  "name": "Acme Bakery",
  "short_name": "Acme",
  "description": "Bread, cakes and coffee, baked every morning.",
  "lang": "en",
  "start_url": "./",
  "scope": "./",
  "display": "standalone",
  "theme_color": "#e8590c",
  "background_color": "#ffffff",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "shortcuts": [
    { "name": "Menu", "url": "./menu.html", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" }] }
  ],
  "screenshots": [
    { "src": "icons/screenshot-wide.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
    { "src": "icons/screenshot-narrow.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
  ]
}

#Identity: id, name, short_name, description

id is the app's permanent identity, resolved against the start URL's origin. Set it once and never change it. name is the full name for the install dialog, the splash screen and the app list. short_name is the home screen label; launchers cut it after about 12 characters, so "Acme Bakery and Coffee" becomes "Acme Bakery a..." unless you set a short one. description appears in some install dialogs and in app stores that list web apps. lang and dir describe the language and direction of those strings.

#Navigation: start_url and scope

start_url is the page the app opens when launched from the icon. scope is the set of URLs that belong to the app; navigating outside it opens a browser tab or shows the address bar. The start URL must be inside the scope and on the same origin, or browsers refuse to install. Both are resolved relative to the manifest file, so "./" works whether the site lives at the domain root or in a GitHub Pages subfolder. A query string like "./?source=pwa" is a common way to measure launches from the icon.

#Display: display, display_override, orientation

display picks the window: standalone looks like a native app with a title bar, fullscreen hides everything for games and media, minimal-ui keeps back and reload buttons, and browser opens a normal tab and makes the site not installable. display_override is an ordered list of fancier modes with fallbacks, such as window-controls-overlay for desktop apps that draw their own title bar. orientation locks the rotation, for example portrait, and is best left out unless the app truly needs it.

#Colors: theme_color and background_color

theme_color colors the title bar of the installed app and the status bar on Android. Add the matching <meta name="theme-color"> tag to your pages so the browser toolbar matches before installation; that tag can also carry a separate dark mode color with a media attribute. background_color fills the splash screen while the app starts, so set it to your page background to avoid a flash.

#Icons, shortcuts and screenshots

icons lists the images with their sizes, type and purpose. You need 192 and 512 pixel icons with purpose any, plus maskable icons, which Android crops into shapes. Keep them as separate files: one icon marked "any maskable" either looks too small as a regular icon or gets cropped as a maskable one. The icon sizes guide lists every size and explains the safe zone. shortcuts adds up to about four entries to the long press menu of the icon. screenshots with a wide and a narrow form factor unlock the richer install dialog in Chrome, with your images instead of a small banner.

#Common mistakes

• A link with a root path on a subfolder site, such as href="/manifest.webmanifest" on user.github.io/repo/, which loads the wrong file or none.
• Icons that do not match their sizes, like a 180 pixel file declared as 192x192.
• A start_url outside the scope, for example "/app/" with a scope of "/app/dashboard/".
• JSON syntax errors, such as a trailing comma, which make the whole manifest invalid.
• The wrong content type from old servers, which some browsers reject. Serve .webmanifest as application/manifest+json.

npx installkite doctor catches each of these, on the files before deploying or on the live URL with --url.

#Questions

#Keep reading