How do you use web app manifests to provide metadata for your progressive web app?

A progressive web app (PWA) is a web application that offers a native-like experience to users, with features such as offline access, push notifications, and home screen icons. To make your PWA more discoverable, installable, and customizable, you need to provide some metadata using a web app manifest file. In this article, you will learn how to create and use a web app manifest for your PWA, and what are the benefits and best practices of doing so.

Find expert answers in this collaborative article

Experts who add quality contributions will have a chance to be featured. Learn more

1 What is a web app manifest?

A web app manifest is a JSON file that contains information about your PWA, such as its name, icons, theme color, orientation, display mode, and scope. The manifest file tells the browser how to present your PWA to the user, and how to behave when it is launched from the home screen. You can also specify which service worker to use for your PWA, and how to handle updates.

Add your perspective

2 How to create a web app manifest?

To create a web app manifest, you need to follow a simple syntax and include the required properties. You can use a tool like Web App Manifest Generator to help you create a valid manifest file. Alternatively, you can write your own manifest file using a text editor or an IDE. Here is an example of a basic manifest file:

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "scope": "/",
  "serviceworker": {
    "src": "/sw.js",
    "update_via_cache": "none"
  }
}

Add your perspective

3 How to use a web app manifest?

To use a web app manifest, you need to link it to your HTML document using a <link> tag in the <head> section. For example:

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

The browser will then fetch and parse the manifest file, and use its information to display your PWA on the user's device. You can also use JavaScript to access and manipulate the manifest data using the Manifest API.

Add your perspective

4 What are the benefits of using a web app manifest?

Using a web app manifest can have several advantages for your PWA, such as giving it a native app look and feel with a full-screen display, home screen icon, splash screen, and custom theme color. It also increases user engagement by enabling your PWA to be installed on the user's device and receive push notifications from your server. Moreover, it enhances the discoverability and SEO of your PWA by providing metadata that can be used by search engines, app stores, and social media platforms.

Add your perspective

5 What are the best practices of using a web app manifest?

To make the most of your web app manifest, you should adhere to some best practices. Namely, use descriptive and consistent names and icons for your PWA that fit different sizes and contexts. Additionally, specify a suitable display mode and orientation for your PWA, and design your UI to adapt to different screens and devices. Defining a clear scope for your PWA is also important, as well as ensuring that your start URL and service worker are within the scope. You should also test your web app manifest on various browsers and platforms, using tools such as Lighthouse and Manifest Validator to check its validity and performance.

Add your perspective

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

How do you use web app manifests to provide metadata for your progressive web app?

1

2

3

4

5

6

1 What is a web app manifest?

2 How to create a web app manifest?

3 How to use a web app manifest?

4 What are the benefits of using a web app manifest?

5 What are the best practices of using a web app manifest?

6 Here’s what else to consider

Front-end Development

Rate this article

Thanks for your feedback

More articles on Front-end Development

More relevant reading