Add a Web App Manifest

Nov 5, 2018

Pete LePage

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. A typical manifest file includes information about the app name, icons it should use, and the URL that should be opened when the app is launched.

Manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera and the Samsung browser, and Safari is currently working on adding support.

Create the manifest.json file

The manifest file can have any name, but is commonly named manifest.json and served from the root (your website's top level directory).

{
  "short_name": "Weather",
  "name": "Weather - Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

Property	Use
`short_name` (required)	Short human-readable name for the application. This is intended for when there is insufficient space to display the full name of the web application, like device homescreens.
`name` (required)	Human-readable name for the site when displayed to the user.
`description` (recommended)	General description of what the PWA does.
`icons` (required)	An array of image files that can serve as application icons. Chrome requires a 192x192px and a 512x512px icon. Additional sizes are optional, and recommended for those who want to ensure pixel perfect icons.
`start_url` (required)	The URL that loads when a user launches the application. This has to be a relative URL, relative to the manifest url.
`background_color` (recommended)	The background color used on the auto-generated splash screen when the PWA is launched.
`display` (required)	The developers' preferred display mode for the PWA.
`scope` (recommended)	The navigation scope of this website's context. This restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it returns to a normal web page inside a browser tab/window.
`theme_color` (recommended)	The default theme color for an application. This affects how the OS displays the site. On Android's task switcher, the theme color surrounds the site. On desktop, the theme color is used to style the title bar.

Add the web app manifest to your pages

When you have created the manifest, add a <link> tag to all the pages of your Progressive Web App.

For example:

<link rel="manifest" href="/manifest.json">

Test your manifest

To verify your manifest is setup correctly, use the Manifest tab on the Application panel of Chrome DevTools.

The application panel in Chrome Devtools with the manifest tab selected.

This tab provides a human-readable version of many of your manifest's properties, and makes it easy to verify that all of the images are loading properly.

Try it

Open a new tab to manifest-good.glitch.me.
Open Chrome DevTools and switch to the Application panel, then the Manifest tab

Create the manifest.json file #

Add the web app manifest to your pages #

Test your manifest #

Try it #

Further reading #

Create the manifest.json file

Add the web app manifest to your pages

Test your manifest

Try it

Further reading