Introduction to Manifest.json
The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file. The manifest informs details for websites installed on the homescreen of a device, providing users with quicker access and a richer experience.
Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s homescreen without an app store, along with other capabilities like working offline and receiving push notifications.
Create the Manifest
A complete manifest.json file for a progressive web app.
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}
Deploying a Manifest
When you have created the manifest add a link tag to all the pages that encompass your web app:
<link rel="manifest" href="/manifest.json">
Manifest.json properties
short_name and name
You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where space may be limited. name is used on the app install prompt.
"short_name": "Maps",
"name": "Google Maps"
icons
When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.
icons is an array of image objects, each object should include the src, a sizes property, and the type of image.
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
start_url
The start_url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.
Your start_url should direct the user straight into your app, rather than a product landing page. Think about the what the user will want to do once they open your app, and place them there.
"start_url": "/?utm_source=a2hs"
background_color
The background_color property is used on the splash screen when the application is first launched.
display
You can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen.
"display": "standalone"
Here are the values of display property:
orientation
You can enforce a specific orientation, which is advantageous for apps that work in only one orientation, such as games. Use this selectively. Users prefer selecting the orientation.
"orientation": "landscape"
scope
The scope defines the set of URLs that the browser considers within your app, and is used to decide when you’ve left your app, and should be bounced back out to a browser tab. The scope controls the url structure that encompasses all the entry and exit points in your web app. Your start_url must reside within the scope.
"scope": "/maps/"
theme_color
The theme_color sets the color of the tool bar, and in the task switcher.
"theme_color": "#3367D6"
Splash screens
When your app first launches, it can take a moment for the browser to spin up, and the initial content to begin rendering. Instead of showing a white screen that may look to the user like the app is stall, Chrome will show a splash screen, until the first paint.
Chrome will automatically create the splash screen from the manifest properties, including: name, background_color, icons
The background_color should be the same color as the load page, to provide a smooth transition from the splash screen to your app.
Icons used for the splash screen
Chrome will choose the icon that closely matches the 128dp icon for that device. 128dp is the ideal size for the image on the splash screen, and means no scaling will be applied to the image.
Again, providing a 192px and a 512px icon will be sufficient for most cases, but you can provide additional icons as necessary.