Manifest.json in html
The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file.
Web app manifests are deployed in your HTML pages using a <link> element in the <head> of a document:
<link rel=”manifest” href=”/manifest.webmanifest”>
or
<link rel=”manifest” href=”/manifest.json”>
Example Manifest:
{
"name": "HackerWeb",
"short_name": "HackerWeb",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A simply readable Hacker News app.",
"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/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}],
"related_applications": [{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}]
}Some important fields in Manifest.json
1.background_color
Defines the expected “background color” for the website. This value repeats what is already available in the site’s CSS, but can be used by browsers to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded. This creates a smooth transition between launching the web application and loading the site’s content.
2. display
Defines the developers’ preferred display mode for the website.
The possible values are:
fullscreen : All of the available display area is used and no user agent chrome is shown.
standalone : The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar.
minimal-ui : The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser.
browser : The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.
3. icons
Specifies an array of image files that can serve as application icons, depending on context.
4. start_url
The URL that loads when a user launches the application (e.g. when added to home screen), typically the index. Note that this has to be a relative URL, relative to the manifest url.
Ex: “start_url”: “/pwa-examples/a2hs/index.html”
5.scope
Defines the navigation scope of this website’s context. This restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it returns to a normal web page inside a browser tab/window.
If the scope is a relative URL, the base URL will be the URL of the manifest.
“scope”: “/myapp/”
6.orientation
Defines the default orientation for all the website’s top level browsing contexts.
”orientation”: “portrait-primary”
