Guide to manifest.json file | Web App Manifest

In this blog post, We are going to learn the web app manifest - manifest.json file example with tutorials.

You can check my other post on nodejs

• Check Nodejs v8 engine version

#web app manifest - manifest.json file

A web app manifest is a JSON file that includes a web application’s metadata. It tells the browser how the user interface should look when the application is installed on a mobile or desktop device.

manifest.json is also called manifest.webmanifest. This can also be used in progressive web applications that look at web applications as native apps.

In browsers like chrome, the manifest file is required to enable the add to home screen prompt feature

The manifest.json file can be added by the following application types.

• Web Applications or Desktop
• Mobile Applications
• Progressive Web Applications PWA
• Chrome Extension Applications

manifest JSON file Supports the following browsers and devices

• Firefox
• Chrome
• Safari
• Android apps
• IOS apps

The manifest.json file contains keys and values for both basic and advanced information, such as name, icons, and start URL.

#list all properties in the manifest json file

Here are different application properties

name, short_name and description are required fields for manifest.json. The remaining fields are options

• name:- Application name that displays the value on the user home screen
• short_name:- shorter name of the application. This will be displayed during the installation of add to home screen feature
• icons - These are icons to be used in application installation, add to the home screen, splash screen: This will contain a collection of images that will be displayed when a user adds the website to the home screen
• start_url This will be the default URL when the application is started. The landing page of the application start-up
• theme_color- this is the color of the application toolbar background_color this specifies the color of the splash screen
• Display - this specifies the application display when it is started, the values are fullscreen, standalone,minimal-ui, browser Orientation - orientation mode of application - landscape or portrait

#manifest.json Sample file example download

Here is the sample manifest.json or manifest.webmanifest sample file.

{
  "name": "Todo PWA Application",
  "short_name": "Todo",
  "description": "To Do Progressive web application.",
  "start_url": "./index.html?home=true",
  "icons": [
    {
      "src": "/icons/todo-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/icons/todo-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/todo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#111111",
  "background_color": "#DDDDDDD",
  "display": "fullscreen",
  "orientation": "portrait"
}

#How to include manifest json file in web application

We can include the manifest.json file in the head using the link tag of the HTML web page. This tells the browser about manifest.json.

href attribute contains the file path.

usually manifest.json or manifest.webmanifest file is located at the root of an application

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

You can also alternatively include manifest.webmanifest

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

manifest json file has provided the following features in applications

• Application metadata information like name, icons, start_url, etc..
• Add to home screen feature
• Splash screen details
• Application installation prompt information Privacy and content guidelines Permissions details
• Installation and uninstallation events
• Application Display and orientation Configuration details

#Conclusion

To sum up, manifest is an important step for configuration for your application, This will be useful for how it is displayed to the user on desktop or browser, or mobile. This is an important step adding this in Progressive webapps