What is manifest.json file and how it is useful

  6 months ago     Views:  4241  
Site Admin
4 Follows


The manifest.json is a simple JSON file in your website that tells the browser about your website on user's mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

When user installs or bookmark your web application to the homescreen or adds it to an application launcher, manifest.json provides to the browser so that it can treat your website the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the preferred orientation and if you want your app to be fullscreen.

The manifest.json file contains details of your website app name, icons it should use, the start_url it should start at when launched, and many other details.

Note: W3C mentions manifest.webmanifest file instead of manifest.json but that the actual name are totally irrelevant, as long as you serve it with application/json. However, manifest.json is far more likely to be served with a correct MIME type.

To add manifest.json file in your website, first tell the browser about path of the manifest.json file. For that add <link> tag in the <head> tag. href is the location of the manifest.json.

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

You can add bellow code if your Manifest file is manifest.webmanifest.

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

Then create manifest.json in the location of the href of the <link> tag. Bellow is the simple example of the manifest.json.

{
    "short_name": "HackTheStuff",
    "name": "HackTheStuff blogging platform",
    "icons": [
        {
            "src": "/images/icons-128.png",
            "type": "image/png",
            "sizes": "128x128"
        },
        {
            "src": "/images/icons-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/images/icons-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": "/index.html",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/app/",
    "theme_color": "#3367D6"
}


First check if manifest.json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set.

Explanation

Let's discuss some of most used options in the manifest.json file.

"short_name": "HackTheStuff",
"name": "HackTheStuff blogging platform",

"short_name" is the very short name of your web application that is displayed in homescreen or in the menu. "name" is bigger name and alias of your web application that is useful when user search in phone or desktop searchbar.

"icons": [
    {
        "src": "/images/icons-128.png",
        "type": "image/png",
        "sizes": "128x128"
    }
],

"icons" option is the logo of your application that will display in the homescreen or the menu. It is a json array of icons object. Every object contains src, sizes and type property You can add different size of your logo and add them in manifest.json file in nested object. It will automatically adds responsive size of icon in different size of the displays.

"start_url": "/index.html",

"start_url" is the root URL of your web application that will always open first.

"display": "standalone",

"display" will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. "standalone" will display as normal with statusbar and "fullscreen" will display in fullscreen.

"orientation": "landscape"

"orientation" will set your application default orientation, when open.

"background_color": "#3367D6",
"theme_color": "#3367D6"

In Android system, Google Chrome and other browsers, "background_color" and "theme_color" will set on splash screen that show while your site is loading.

"scope": "/app/",

"scope" controls the URLs that navigates all the entry and exit points in your web application. If the user opens that is outside the scope, then it opens in  normal web page inside a browser tab/window.

Conclusion

The manifest.json file has overcome to add different meta tag for different browsers and helps to sets unique to display in different browsers. There are many other options that you can add in the manifest.json. For full reference, see documents at Google or MDN web docs.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

1 Comments

  • Image
    Akash Shrimali
    June 03, 2020 Reply

    Hello,
    If .php file used in "browser_action": { "default_popup": and extension added in chrome then not open extension.
    If any idea then please email me.
    My email is akashshrimali1995@gmail.com.
    Thank you in advanced.