{

Guide to manifest.json file | Web App Manifest


manifest.json file  Nodejs  example

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

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

Parameter Description
name Name of an application
short_name Short name of a web application, shown to the user with desktop or mobile
description Description of an application
author Application Author
version Application Version
icons Icons specified for an application, It is a JSON object, that contains src, size, and type
theme_color Theme color code which will be displayed on mobile
start_url It is a home page URL of an application
background_color Background color as a splash screen during application started in android or ios app mobiles
display How Application displayed to Browser, Values are standalone, fullscreen, minimul-ui
orientation application default orientation landscape or portrait
scope application entry and exit paths

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.