Creating a Web Manifest File

How to Create a Manifest File?

To create a manifest file, you need to follow these steps:

Step 1: Create a new text file and name it manifest.json. You can use any text editor or IDE of your choice, such as Visual Studio Code, Sublime Text, or Notepad++.
Step 2: Open the file and add a JSON object with the necessary information about your web application. The JSON object should have the following syntax:

JAVASCRIPT

                        
{

  "member1": "value1",

  "member2": "value2",

  ...

}

The members are the keys that define the properties of your web application, and the values are the corresponding data for each property. The members are optional in the specification, but some applications require some members to be present. For example, PWAs must provide certain manifest members.

Step 3: Save the file and place it in the root directory of your web application. The root directory is the folder that contains the main HTML file of your web application, such as index.html.
Step 4: Deploy the manifest file in your HTML pages using a <link> element in the <head> of the document. The <link> element should have the following attributes:

HTML

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

The rel attribute specifies the relationship between the HTML document and the manifest file, which is manifest. The href attribute specifies the URL of the manifest file, which is manifest.json in this case. You can also use a different name or location for your manifest file, as long as you provide the correct URL in the href attribute.

What are the Manifest Members?

The manifest members are the keys that define the properties of your web application. There are many manifest members that you can use, but some of the most common and important ones are:

name: The name of your web application, which is displayed to the user in various contexts, such as the app launcher, the splash screen, or the app banner. The value should be a string that is short and descriptive, such as "HackerWeb" or "Todo List".
short_name: The short name of your web application, which is used when there is not enough space to display the full name, such as the home screen, the app switcher, or the notification tray. The value should be a string that is shorter than the name, but still recognizable, such as "HackerWeb" or "Todo".
start_url: The start URL of your web application, which is the URL that the browser launches when the user opens the app from the home screen, the app launcher, or the app banner. The value should be a string that is a valid URL, relative to the manifest file, such as ".", "/index.html", or "/?utm_source=homescreen".
display: The display mode of your web application, which determines how the app is displayed on the screen, such as the presence or absence of the browser's address bar, navigation buttons, or status bar. The value should be a string that is one of the following: "fullscreen", "standalone", "minimal-ui", or "browser". The default value is "browser", which means the app is displayed as a regular web page. The other values mean the app is displayed as a standalone app, with varying degrees of browser UI elements.
icons: The icons of your web application, which are used to represent the app in various contexts, such as the home screen, the app launcher, the splash screen, the notification tray, or the app banner. The value should be an array of objects, each representing an icon with the following properties: "src", "sizes", and "type". The "src" property specifies the URL of the icon image, relative to the manifest file, such as "/images/touch/homescreen48.png". The "sizes" property specifies the size of the icon image, in pixels, such as "48x48". The "type" property specifies the MIME type of the icon image, such as "image/png". You can provide multiple icons with different sizes and types, to suit different devices and platforms.

JAVASCRIPT

                        
"icons": [

  {

    "src": "/images/touch/homescreen48.png",

    "sizes": "48x48",

    "type": "image/png"

  },

  {

    "src": "/images/touch/homescreen72.png",

    "sizes": "72x72",

    "type": "image/png"

  },

  {

    "src": "/images/touch/homescreen96.png",

    "sizes": "96x96",

    "type": "image/png"

  },

  {

    "src": "/images/touch/homescreen144.png",

    "sizes": "144x144",

    "type": "image/png"

  },

  {

    "src": "/images/touch/homescreen168.png",

    "sizes": "168x168",

    "type": "image/png"

  },

  {

    "src": "/images/touch/homescreen192.png",

    "sizes": "192x192",

    "type": "image/png"

  }

]

background_color: The background color of your web application, which is used to fill the screen while the app is loading, before the app's content is rendered. The value should be a string that is a valid CSS color value, such as "#fff", "rgb(255, 255, 255)", or "white". The background color should match the background color of your app's content, to provide a smooth and seamless user experience.
theme_color: The theme color of your web application, which is used to customize the appearance of the browser's UI elements, such as the address bar, the status bar, or the tab bar. The value should be a string that is a valid CSS color value, such as "#4285f4", "hsl(217, 100%, 50%)", or "blue". The theme color should match the color scheme of your app's content, to provide a consistent and harmonious user experience.

There are many other manifest members that you can use, such as description, orientation, prefer_related_applications, related_applications, scope, screenshots, serviceworker, share_target, shortcuts, and more. You can find the full list and description of the manifest members in the Web App Manifest specification or the MDN Web Docs.

Example Manifest

JAVASCRIPT

                        
{

  "name": "My Amazing Shopping App",

  "short_name": "ShopApp",

  "start_url": "/",

  "display": "standalone",

  "theme_color": "#ff9800",

  "background_color": "#fff",

  "icons": [

    {

      "src": "images/icon-72x72.png",

      "sizes": "72x72",

      "type": "image/png"

    },

    {

      "src": "images/icon-192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    },

    {

      "src": "images/icon-512x512.png",

      "sizes": "512x512",

      "type": "image/png"

    }

  ],

  "scope": "/",

  "screenshots": [

    {

      "src": "images/screenshot1.png",

      "sizes": "640x480",

      "type": "image/png"

    },

    {

      "src": "images/screenshot2.png",

      "sizes": "640x480",

      "type": "image/png"

    }

  ],

  "related_applications": [

    {

      "platform": "play",

      "id": "com.example.android.myapp"

    },

    {

      "platform": "itunes",

      "id": "1234567890"

    }

  ],

  "share_target": {

    "action": "share",

    "method": "GET",

    "params": {

      "title": "{title}",

      "text": "{text}",

      "url": "{url}"

    }

  },

  "shortcuts": [

    {

      "name": "Add to Cart",

      "short_name": "Add",

      "icons": [

        {

          "src": "images/icon-add-48x48.png",

          "sizes": "48x48",

          "type": "image/png"

        }

      ],

      "url": "/add-to-cart"

    },

    {

      "name": "View Wish List",

      "short_name": "Wishlist",

      "icons": [

        {

          "src": "images/icon-wishlist-48x48.png",

          "sizes": "48x48",

          "type": "image/png"

        }

      ],

      "url": "/wishlist"

    }

  ]

}

What are the Best Practices for Creating a Manifest File?

To create a manifest file that is effective and user-friendly, you should follow these best practices:

Provide the essential members: You should provide the essential members that are required or recommended for your web application, especially if you are creating a PWA. These members include name, short_name, start_url, display, icons, background_color, and theme_color. These members provide the basic information and appearance of your web application, and affect how the app is installed and launched by the user.
Use descriptive and consistent values: You should use descriptive and consistent values for the members that represent your web application, such as name, short_name, description, icons, and screenshots. These values should reflect the purpose, functionality, and identity of your web application, and should match the content and design of your web pages or app. You should also use consistent values across different members, such as using the same name, icon, and color for name, short_name, and icons.
Use relative and secure URLs: You should use relative and secure URLs for the members that reference external resources, such as start_url, icons, screenshots, and serviceworker. These URLs should be relative to the manifest file, such as "/index.html" or "/images/touch/homescreen48.png", instead of absolute URLs, such as "https://example.com/index.html" or "https://example.com/images/touch/homescreen48.png". This makes the manifest file more portable and flexible, as it can work on different domains or subdomains. These URLs should also use HTTPS, a secure protocol that ensures the integrity and confidentiality of the data exchanged between the web application and the server. HTTPS also enables the use of service workers and other web APIs that require a secure context.
Use valid and consistent JSON syntax: You should use valid and consistent JSON syntax for the manifest file, as any syntax errors or inconsistencies may cause the manifest file to be ignored or misinterpreted by the browser. You should follow the JSON rules and conventions, such as using double quotes for strings and keys, using commas to separate members and values, using brackets to enclose arrays, and using colons to separate keys and values. You should also use a JSON validator tool, such as JSONLint, to check and format your manifest file.
Test and debug your manifest file: You should test and debug your manifest file to ensure that it works as expected and provides the desired information and appearance for your web application. You should use the browser's developer tools, which provide various features and options to inspect and manipulate the manifest file, such as viewing the manifest details, the app installation status, the app launch behavior, the app icons, the splash screen, and the theme color. You should also use the browser's console panel, where you can see the errors or warnings related to the manifest file, such as missing or invalid members, unsupported values, or CORS issues.

Conclusion

A manifest file is a JSON text file that provides information about a web application, such as its name, icon, description, display mode, background color, and more. A manifest file is essential for creating a Progressive Web App (PWA), which is a web application that provides a native-like user experience, with features such as offline functionality, push notifications, and home screen installation. To create a manifest file, you need to create a JSON object with the necessary information about your web application, save the file and place it in the root directory of your web application, and deploy the file in your HTML pages using a element. To create a manifest file that is effective and user-friendly, you should follow the best practices, such as providing the essential members, using descriptive and consistent values, using relative and secure URLs, using valid and consistent JSON syntax, and testing and debugging your manifest file. A manifest file is a simple and powerful tool for web development, as it enables creating fast, reliable, and engaging web experiences.