How to write Web App Manifest PWA | Examples

A web app manifest is a JSON file that provides information about a web application in a structured way. It can be used to specify the name, icons, start URL, and other settings for a Progressive Web App (PWA).

The web app manifest allows developers to control how their web applications appear when they are added to the home screen of a device, and also how they are launched.

It enables users to easily access the web application from their home screens and provides a native-like experience.

Here is an example of a web app manifest:

{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

To use the web app manifest, you need to include a link to it in the head of your HTML file:

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

Multiple Icons

In a web app manifest, the icons field specifies a list of image files that can be used as the icon for the web application. You can include multiple icons in this list to provide different sizes and formats for different devices and scenarios.

Here is an example of a web app manifest with multiple icons:

{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icon-180.png",
      "type": "image/png",
      "sizes": "180x180",
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

In this example, the manifest includes three icons:

• A 192×192 PNG icon
• A 512×512 PNG icon
• A 180×180 PNG icon

By providing multiple icons in different sizes and formats, you can ensure that your web application looks good on a variety of devices and in different scenarios.

Custom Icon Shortcut

To create a custom shortcut icon on the user’s home screen, you can use the purpose field to specify an icon that is intended to be used as a mask.

The user’s device will then use this icon as a mask to create a custom icon on the home screen.

Here is an example of a web app manifest with a custom shortcut icon:

{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icon-mask.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

In this example, the manifest includes a 512×512 PNG icon that is marked as “maskable”. The user’s device will use this icon as a mask to create a custom icon on the home screen.

By providing multiple icons in different sizes and formats, you can ensure that your web application looks good on a variety of devices and in different scenarios.

Light & Dark Color Supports

In a web app manifest, the theme_color and background_color fields specify the colors to use for the web application. These colors can be used to style the browser interface and the splash screen that is shown when the web application is launched.

You can use the theme_color and background_color fields to specify different colors for light and dark modes. For example:

{
  "short_name": "My PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "/icon.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": {
    "light": "#ffffff",
    "dark": "#000000"
  },
  "background_color": {
    "light": "#ffffff",
    "dark": "#000000"
  }
}

In this example, the manifest specifies different colors for light and dark modes. The user’s device will automatically use the appropriate colors based on the current system theme.

For more information about the web app manifest, see the Web App Manifest specification and the MDN documentation.