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": "Laravelcode",
"name": "Laravelcode 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": "Laravelcode",
"name": "Laravelcode 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.
